طريقة جعل قالب متوافق مع جميع الشاشات { الحل 4 : اضافة قائمة متوافقة للمدونة }

Ha Zard

3:45 م

بعد أن أتممنا الجزء الأكبر من سلسلة دروس جعل قالب متوافق مع جميع الأجهزة و الشاشات , اليوم سنبدء بالمقتطفات أو التعديلات الصغيرة و التي تزيد من جمالية القالب في الشاشات الصغيرة مثل الهواتف  . لذا قررت أن أخصص هذه المقالة لشرح كيفية الحصول على قائمة متجاوبة لموقعك، باستخدام تقنيتي الـ CSS3 و jQuery 

الطريقة سهلة جدا , أنا سأشرح طريقة اضافة قائمة متوافقة من الصفر و أنت يمكنك أن تستخلص طريقة جعل قائمتك متوافقة بتخصيصاتك 

أضف هذا كود الHTML التالي في المكان الذي تريد أن تظهر فيه القائمة 

<div id="navigation-dzpro">

 <ul class="navigation">

 <li><a href="www.dzprofessionale.com/">الرئيسية</a></li>

 <li><a href="www.dzprofessionale.com/">قسم 1</a></li>

 <li><a href="www.dzprofessionale.com/">قسم 2</a></li>

 <li><a href="www.dzprofessionale.com/">قسم 3</a>

 <ul>

 <li><a href="www.dzprofessionale.com/">قسم 4</a></li>

 <li><a href="www.dzprofessionale.com/">قسم 5</a></li>

 <li><a href="www.dzprofessionale.com/">قسم 6</a></li>

 </ul>

 </li>

 <li><a href="www.dzprofessionale.com/">قسم 7</a></li>

 <li><a href="www.dzprofessionale.com/">قسم 8</a></li>

 </ul>

 </div>

بعد ذالك قم باضافة كود الجيكويري التالي فوق </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;

}

}

}

موضوع :
80 من 80 | 100 تقييم من المستخدمين و 68 من أراء الزوار

قم بمشاركة الموضوع:

انقر هنا لرؤية الموضوع في المصدر