التخطي إلى المحتوى الرئيسي

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

بواسطة


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

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

قالب محترف الجزائر النسخة 1

بواسطة
ادا هدا أول قالب من تصميمي و أردت أضعه بين أيديكم مجانا أولا لا أسمح بتاتا بحدف المصدر لأنني تعبت كثيرا في التصميم ادا هدا القالب اسمه قالب مدونة محترف الجزائر النسخة الأولى و انتضر المزيد من القوالب الأخرى من تصميمي مميزات القالب متوافق و محسن للسيو و محركات البحث خطوط احترافية أزرار النشر تحت كل تدوينة تعريف الكاتب تحت كل تدوينة اضافة الاشتراك بالبريد الالكتروني احترافية و العديد من المميزات أدعك تكتشفها بنفسك صورة للقالب معاينة لتحميل القالب كل ما عليك هو وضع في تعليق البريد الالكتروني الخاص بك رابط موقعك و سيتم ارسال القالب فورا أي استفسار ضعه في تعليق و سأكون سعيد جدا بالاجابة عليه
23 تعليقًا
قراءة المزيد

قالب محترف الجزائر النسخة 10 (قالب للمدونات الشخصية)

بواسطة
السلام عليكم ورحمة الله وبراكته أقدم لكم اليوم القالب النسخة 10 القالب البسيط و الاحترافي مناسب للمدونات الشخصية  مميزات القالب  سريع التصفح  بسيط واحترافي  ألوان هادئة  تعريف الكاتب ومقالات ذات صله وأزرار المشاركة تحت كل تدوينة  صفحة خطأ احترافية  معاينة  تحميل  للتعديل على اللوجو ابحث عن  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVoqGXEP3MoKrG4IMxT-F-t5DWhcgomujrRJ_UFrtzAV9_dydorVP3lLLk8f_lVU1bEEVcJvYQlnncHqw1J1hh70msuex4mNa0iNeH79cnRRKwocjARTZ-YKZNMpD6QnOM-_fRk0jh3Is/s1600/psd-logo-300x108.png
16 تعليقًا
قراءة المزيد

اعلانك في مدونة محترف الجزائر مجانا لمدة شهر

بواسطة
السلام عليكم  تم غلق المسابقة كما من المعتاد تقريبا كل عام مدونت محترف الجزائر تضع مسابقات عديدة لهدا اليومك نقد لكم مسابقة للاعلان عن موقعك ,حسابك على  أي شبكة اجتماعية ,قناتك ..... مجانا و لمدة شهر كامل  على أمل أن نساعدك في النهوض بموقعك و الحصول على عدد مقبول من الزوار لموقعك  لمادا عليك أن تعلن لدينا  ترتيب في أليكسا : 602,700    عدد الزوار في اليوم : من 1500 الى 2000  مدونة dzpro لها شهرة مقبولة في العالم العربي  كما سيتم وضع اعلانك في الهيدر (بجانب اللوغو) شروط المشاركة 1- عليك الاعجاب بصفحتنا على الفيسبوك كما ترى فليس هناك العديد من الشروط و يمكنك تأديتها بسهولة و أخيرا للتواصل و ليتم تسجيلك في قائمة المشتركين قم بكتابة في تعليق : اميلك (اجباري)  اسمك (غير اجباري) حسابك على الفيسبوك ,سيتم اضافتك من قبل الأدمين (اجباري) ملاحظة : ادا لم تطبق الشروط سيتم استبعادك ادا ستستمر المسابقة لمدة أسبوع بدءا من اليوم أي من يوم 22 / 02 /2014 الى 1 / 03 /2014 ادا لم يبقى لي الا أن أتمنا لك التوفيق...
14 تعليقًا
قراءة المزيد