الطريقة سهلة جدا , أنا سأشرح طريقة اضافة قائمة متوافقة من الصفر و أنت يمكنك أن تستخلص طريقة جعل قائمتك متوافقة بتخصيصاتك
أضف هذا كود ال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;
}
}
}
------------------------------------------------------------------------------------------------------------------------
نتمنى أن تعجبكم الطريقة لاتنسو تعليق تشجيغي من فضلكم
