بدأت قوالب بلوجر تشهد تطورا كبيرا من حيث التقنيات المستعملة في تصميمها وأصبح كل شخص يقدم أفضل ما عنده في استعمال آخر التقنيات في عالم التصميم والبرمجة ليبهر في الآخرين بقالبه الرائع، وطبعا انتشر في الآونة الأخير نوع من القوالب يدعى القوالب المتجاوبة وهو يعمل على الأجهزة من دون أية مشاكل ويتوافق معها ليوفر للزائر إمكانية زيارة في المدونة في أي وقت وفي أي مكان. في هذه التدوينة نقدم لكم قائمة أفقية متجاوبة لمدونات بلوجر والتي سوف تحتاجها إن كنت تريد تصميم قالب متجاوب بلا شك.
كيفية تركيب القائمة الأفقية المتجاوبة
أولا لابد أن تختار وتحدد المكان الذي سوف تضع فيه القائمة إن كانت أداة أم مباشرة من القالب، لذلك هذا الأمر يعود لك وسوف أنتقل مباشرة إلى الكود، بعد تحديد المكان لوضع القائمة تلصق فيه هذا الكود :
<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>
وأخيرا تضغط حفظ، ولا تنسى أنه يمكنك تخصيص القائمة على حسب رغبتك فهي سهلة الاستعمال :) .
0 تعليقات:
إرسال تعليق