الطريقة سهلة جدا , أنا سأشرح طريقة اضافة قائمة متوافقة من الصفر و أنت يمكنك أن تستخلص طريقة جعل قائمتك متوافقة بتخصيصاتك
أضف هذا كود الHTML التالي في المكان الذي تريد أن تظهر فيه القائمة
------------------------------------------------------------------------------------------------------------------
<div id="navigation-dzpro">
<ul class="navigation">
<li><a href="http://www.mymour.com//">الرئيسية</a></li>
<li><a href="http://www.mymour.com/">قسم 1</a></li>
<li><a href="http://www.mymour.com//">قسم 2</a></li>
<li><a href="http://www.mymour.com//">قسم 3</a>
<ul>
<li><a href="http://www.mymour.com//">قسم 4</a></li>
<li><a href="http://www.mymour.com//">قسم 5</a></li>
<li><a href="http://www.mymour.com//">قسم 6</a></li>
</ul>
</li>
<li><a href="http://www.mymour.com//">قسم 7</a></li>
<li><a href="http://www.mymour.com//">قسم 8</a></li>
</ul>
---------------------------------------------------------------------------------------------------------------------
بعد ذالك قم باضافة كود الجيكويري التالي فوق </head>
----------------------------------------------------------------------------------------------------------------------
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
$('#navigation-dzpro').prepend('<div id="menu-icon">قائمة</div>');
$("#menu-icon").on("click", function(){
$(".navigation").slideToggle();
$(this).toggleClass("active");
});
});
//]]>
</script>
-----------------------------------------------------------------------------------------------------------------------
بعد هذه الخطوة و كاخر خطوة هي اضافة أكواد ال css لتنسيق القائمة و لوضع لها شكل خاص في الأجهزة الذكية .
---------------------------------------------------------------------------------------------------------------------
#navigation-dzpro {
margin-top: 0px;
width:100%;
height:39px;
background: #f9f7f8;
border-bottom:5px solid #ddd;
}
#menu-icon {
display: none;
}
.navigation,
.navigation li {
margin: 0;
padding: 0;
}
.navigation li {
list-style: none;
float: right;
}
.navigation a {
padding: 7px 15px;
display: block;
font-size:13px;
color:#333;
background: #f9f7f8;
}
.navigation a:hover {
background: #eee;
}
.navigation ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none;
width: 200px;
}
.navigation ul li {
float: none;
margin: 0;
padding: 0;
}
.navigation li:hover > ul {
display: block;
}
@media screen and (max-width: 600px) {
#navigation-dzpro {
position: relative;
}
#menu-icon {
color: #333;
width: 42px;
height: 30px;
background: #ecebeb url(../menu-icon.png) no-repeat 60px center;
padding: 8px 52px 0 10px;
cursor: pointer;
border: solid 1px #ddd;
display: block;
}
#menu-icon:hover {
background-color: #f9f7f8;
}
#menu-icon.active {
background-color: #ddd;
}
.navigation {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f9f7f8;
border: solid 1px #ddd;
display: none;
}
.navigation li {
clear: both;
float: none;
margin: 5px 10px 5px 0;
}
.navigation a,
.navigation ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #555;
border: none;
}
.navigation a:hover,
.navigation ul a:hover {
background: none;
color: #333;
}
.navigation ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
.navigation ul li {
margin: 3px 15px 3px 0;
}
}
@media screen and (min-width: 600px) {
.navigation {
display: block !important;
}
}
}
------------------------------------------------------------------------------------------------------------------------
نتمنى أن تعجبكم الطريقة لاتنسو تعليق تشجيغي من فضلكم
الشخص الدي كتب هده المواضيع سلسلة جعل قالبك متوافق يستحق تميز والله
ردحذفان شاء الله في انتظار المزيد من المقالات
وشكرا على المجهود
اهلا بك اخي
ردحذف