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

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 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 من أراء الزوار

تعليقات

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

طرق فعالة لتسريع التحميل ببرنامج التورنت "حصرية"

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



اختيار تورنت سريع للتحميل

الخطوة الاولي والاهم هي اختيار تورنت سريع ، والتورنت السريع هو ما يكون به Seeders او Leechers اكبر من الـ Peers ، فكلما زاد العدد كان افضل واسرع. فالـ Seeders هم الاشخاص الذين قاموا بتحميل الملف ويقومون بمساعدة الاخرين من خلال جهازهم للتحميل ، والـ Peers هم الاشخاص الذين يقومون بتحميل الملف الان. لذلك فحاول دائما اختيار ملف يحتوي علي Seeders اكبر من الـ Peers ، او علي الاقل بنسبة اكبر ، فتورنت يحتوي علي 30 Seeders و 70 Peers يعتبر افضل من تورنت يحتوي علي 100  و 700 Peers ، فحاول أن تكون النسبة عالية حتي يكون التورنت سريع.

السماح لبرنامج التورنت من خلال الجدار الناري
الجدار الناري هو جدار الحماية علي جهازك لحماية جهازك من الاختراق حيث يشكل جدار للاتصالات الواردة بجهازك والصادرة من جهازك. وبما أن برنامج التورنت يق…

كيف يتم الاختراق بالتخمين في ال CMD

السلام عليكم و رحمة االله و براكته في هده الحلقة و هدا الدرس سأريك طريقة من الطرق التي يستطيع الهاكر بها اختراقك عنطريق التخمين أضن أنك سمعت بكلمة تخمين و ادا لم تسمع بها هي عبارة عن طريقة يقوم الهاكر باختراق الحسابات عنطريق تجريب الباسووردات التي يضن أنها قد تكون كلمة السر التي يبحث عنها لكن لن يجرب جميع الباسووردات بنفسه يضع مثلا 1000 كلمة سر في برنامج و البرنامج سيجرب كل الباسووردات في ثواني فقط

حسنا أردت ّأن أريكم CMD كيف يتم الاختراق بالتخمين في ال  python25ستحتاج الى أدات وملفان سكريبت التخمين و لستة الباسووردات ادن تابع الحلقة لتتعرف على الطريقة  CMD كيف يتم الاختراق بالتخمين في ال 
تحميل الملفات python25برنامج من الموقع الرسمي http://www.python.org/download/  سكريبت و لستة الباسووردات Mega

حماية الروابط بكلمة سر ( الدخول لرابط من موقعك بكلمة سر )

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



الاضافة سهلة فقط غيير ما باللون الأحمر و قم بنسخ الكود و لصقه في المشاركة في تبويب HTML في المكان الذي تريده
<script> function passWord() { var testV = 1; var pass1 = prompt('يرجى ادخال الرقم السري',' '); while (testV < 3) { if (!pass1)  history.go(-1); if (pass1.toLowerCase() == "كلمة السر هنا") { alert('تم قبول الرقم السري'); window.open('http://الرابط هنا'); break; }  testV+=1; var pass1 =  prompt('لا يمكن دخولك - الرقم السري خاطئ, يرجى إعادة المحاولة','ادخل هنا الرقم السري'); } if (pass1.toLowerCase()!="password" & testV ==3)  history.go(-1); return " "; }…