قايمة أفقية بسيطة ومميزة لمدونات بلوجر

اليوم مدونة مدون تقدم لكم قايمة أفقية بسيطة جدا وخفيفة لمدونات بلوجر القايمة تتميز بصغر حجمها وسرعتها فى التحميل إضافة إلى وجود انسدال جميل جدا بها وشكلها جذاب وبسيط يمكنك إضافة أقسام من مدونتك بها بشكل احترافى بسيط والأن مع طريقة التركيب

المعاينــــة الحية المباشرة

اذهب إلى لوحة تحكم مدونتك >> اختر التخطيط  >>  اضافة أداة >> Html/javascript 

ضع بها هذا الكود 

    <nav> <a id="tombolmenu" href="#">Menu</a> <ul class="menu" style="margin:0;padding:0;"> <li><a href="#">قائمة 1</a></li> <li><a href="#">قائمة 2</a></li> <li><a href="#">قائمة 3</a></li> <li><a href="#">قائمة 4</a></li> <li><a href="#">قائمة 5</a></li> <li><a href="#">قائمة منسدلة</a> <ul class="hidden"> <li><a href="#">قائمة منسدلة 1</a></li> <li><a href="#">قائمة منسدلة 1</a></li> <li><a href="#">قائمة منسدلة 1</a></li> <li><a href="#">قائمة منسدلة 1</a></li> </ul> </li> </ul> </nav> <script type="text/javascript"> (function () {     $('nav ul').removeClass('hidden');     $('nav li').hover(function () {         $(this).parent('ul.menu').css('overflow', 'visible');         $(this).children('ul').filter(':not(:animated)').slideDown();     }, function () {               $(this).children('ul').slideUp();     });     $('#tombolmenu').toggle(function () {         $(this).addClass('active');         $('nav > ul').slideDown();         return false;     }, function () {         $(this).removeClass('active');         $('nav > ul').slideUp();         return false;     });     function checkWidth() {         if ($(window).width() > 600) {             $('nav > ul').css('display', 'block');         } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') === 'active') {             $('nav > ul').css('display', 'block');         } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') !== 'active') {             $('nav > ul').css('display', 'none');         }     }     $(window).resize(checkWidth); })(); </script> <style> nav {   font:normal normal 11px/30px Verdana,Geneva,sans-serif;   background-color:#313131; } nav, nav * {   display:block; } nav #tombolmenu {   display:none; } nav ul, nav li {   padding:0;   margin:0;   list-style:none; } nav ul {   height:30px;   margin: 0px;   padding: 0px; } nav li {   float:right;   position:relative; } nav li a {   color: white;   display: block;   line-height: 2.7;   padding: 0 10px;   text-decoration: none; } nav li:hover > a {   background-color:#1D8FC5; } nav li ul {   position:absolute;   background-color:black;   height:auto;   width:160px;   display:none;   margin:0 !important;   padding:0 !important; } nav li:hover ul.hidden {   display:block; } nav li li {   float:none; } @media only screen and (max-width:600px) {   nav #tombolmenu {     display:block;     padding:0 15px;     background-color:black;     text-decoration:none;   }   nav #tombolmenu.active {     background-color:#1D8FC5;     color:white;   }   nav ul {     height:auto;     display:none;   }   nav li {     float:none;   }   nav li ul {     width:100%;   } } </style>

استودعكم اللــــه الذى لا تضيع ودائعــــــــــــه

منشورة في: اضافات بلوجر