آخر المواضيع
جاري التحميل...
الخميس، 11 يوليو، 2013

في
” أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم ،،

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

كيفية تركيب القائمة الأفقية المتجاوبة

أولا لابد أن تختار وتحدد المكان الذي سوف تضع فيه القائمة إن كانت أداة أم مباشرة من القالب، لذلك هذا الأمر يعود لك وسوف أنتقل مباشرة إلى الكود، بعد تحديد المكان لوضع القائمة تلصق فيه هذا الكود :

<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>

وأخيرا تضغط حفظ، ولا تنسى أنه يمكنك تخصيص القائمة على حسب رغبتك فهي سهلة الاستعمال :) .

المحرر : عماد عادل
عماد عادل هو مدون يبلغ من العمر 14 سنة، يعيش في القيروان، تونس. مصمم ومدون ومؤسس المختبرات العربية، يحب نشر الأفكار الجديدة ويسعى إلى تطوير المحتوى العربي الهزيل. الملف الشخصي
تابعه على : فيس بوك | تويتر | جوجل بلس | بنترست | دفيان آرت | يوتيوب | الموقع.
” أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم ،،

0 تعليقات:

إرسال تعليق