قوائم منسدلة متجاوبة لمدونات بلوجر
السلام عليكم ورحمة الله وبركاته
نقدم لكم اليوم مجموعة قوائم منسدلة جميلة لمدونات بلوجر متعددت يمكنك أختيار المناسبة لمدونتك وتركيب القائمة عليها, طبعاً لا يمكن إستخدام أكثر من قائمة لمن ليس لديه خبرة في هذا المجال من اجل تجنب أخطاء قد لا تظهر القائمة بالشكل الصحيح
هذه القوائم جميعها متوافق مع الاجهزة المحمولة والمكتبية وكل الشاشات الأخرى فهي متجاوبة %100, كيف متجاوبة؟ المتجاوبة هي التي يمكن أن يتغير شكلها مع الشاشات الأخرى الصغيرة أو الكبيرة حتى تتناسب معها, القوائم مقدمة بشكل حصري من مدونة مداد الجليد
القائمة الاولى:
هذه القائمة هي أفضل القوائم من حيث المظهر وجمالها لكنها قد تكون ثقيلة قليلاً لكني أستخدها بشكل دائم ويمكن ان ترون معاينة عبر مدونة مداد الجليد
طريقة تركيب القائمة
من خلال لوحة التحكم في مدونتك -->> القالب ثم أنقر على زر تحرير html الأن أبحث عن الرمز ]]> ثم أضف الكود التالي فوقه مباشرةً:
/* Navigation
----------------------------------------------- */
#mobilenav,.rcbytag.s .comnum,.rcbytag.h .a0 .comnum,.rcbytag.v .a0 .comnum{display:none}
#nav{height:40px;position:relative}
.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu li{position:relative}
.sf-menu ul{position:absolute;display:none;top:100%;right:0;z-index:99}
.sf-menu > li{float:right;margin:0 1px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:block}
.sf-menu a{display:block;position:relative}
.sf-menu > li > a{font-size:110%}
.sf-menu ul ul{top:0;left:100%}
.sf-menu{float:right}
.sf-menu ul{min-width:12em;padding-top:5px;*width:12em}
.sf-menu a{padding:0 10px;height:40px;line-height:40px;text-decoration:none;zoom:1}
.sf-menu a.home{background-color:#15587D;text-indent:-9999px;padding:0;width:45px;margin-right:4px;text-indent:-9999px}
.sf-menu a{color:#FFFFFF;font-size:100%}
.sf-menu li{white-space:nowrap;*white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}
.sf-menu ul li{background-color:#333;margin:1px 0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.sf-menu ul a{font-weight:normal;height:30px;line-height:30px}
.sf-menu ul a:hover{padding-right:12px}
.sf-menu ul ul li{background:#3C3C3C;margin:0 0 1px 2px}
.sf-menu li:hover > a,.sf-menu li.sfHover,.sf-menu > li > a.current{background-color:#15587D;-moz-transition:none;-webkit-transition:none;transition:none}
.sf-arrows .sf-with-ul{padding-left:2em;*padding-left:1em}
.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;left:0.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFFFFF}
.sf-arrows > li > .sf-with-ul:focus:after,.sf-arrows > li:hover > .sf-with-ul:after,.sf-arrows > .sfHover > .sf-with-ul:after{border-top-color:#FFFFFF}
.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-left:-3px;border-color:transparent;border-right-color:#FFFFFF}
.sf-arrows ul li > .sf-with-ul:focus:after,.sf-arrows ul li:hover > .sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-right-color:#FFFFFF}
.sf-menu li > i{position:absolute;top:5px;left:3px;width:27px;height:22px;cursor:pointer;display:none;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0}
.sf-menu li > i:after{content:'+';color:#FFFFFF;font-size:19px;position:absolute;right:5px;top:-2px}
.sf-menu li > i.active:after{content:'-';font-size:36px;top:-14px}
/* Social Icon */
#socialicon{float:left;width:179px;padding:8px 0}
#socialicon ul,#socialicon li{padding:0;margin:0;list-style:none}
#socialicon li{float:right;margin:0 2px}
#socialicon a{display:block;text-indent:-9999px;width:24px;height:24px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjViDZl7Jgp-GRhkBiVHsqPWM93yA8dpfd-DIsbsd7mY4RS-GXbIfb1nlSwlYY514_f-ixE60nHKE8ldXGcoK26S35loqW5RrLuGxbeaWrF05YDPuSEAkAfEKqRQjvduewgJEzJORm8NMQ/s1600/soicon.png);background-position:-1px 0;background-repeat:no-repeat;position:relative}
#socialicon a:active{top:1px}
#socialicon .fbx{background-position:-1px 0}
#socialicon .twix{background-position:-27px 0}
#socialicon .goex{background-position:-53px 0}
#socialicon .linx{background-position:-131px}
#socialicon .pinx{background-position:-79px 0}
#socialicon .drix{background-position:-157px}
#socialicon .vmex{background-position:-183px 0}
#socialicon .rssx{background-position:-105px}
#topmenu{overflow:hidden;padding:0 5px;color:#FFFFFF;font-size:90%}
#topmenu .tgltop{float:right;height:26px;line-height:26px;padding:4px 6px}
.sf-menu a.home:before,#searchnya button:before,#view a:before,.post-footer a.timestamp-link:before,.post-footer .post-author.vcard .fn:before,.post-footer .comment-link:before,.post-footer .post-labels > span:before,.rcentpost .date:before,.rcentpost .comnum:before,.morepostag a:before,#mobilenav:before,.comments .comments-content .icon.blog-author:before{position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}
.sf-menu a.home:before,#searchnya button:before,#view a:before{text-indent:0}
.sf-menu a.home:before{width:30px;height:30px}
.sf-menu a.home:before{content:"\f015";top:0;font-size:27px;left:9px}
@media only screen and (max-width:979px){
#mobilenav{display:block;text-indent:-9999px;width:40px;top:2px;right:10px;position:absolute;height:36px;outline:0;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFFFFF;text-decoration:none}
#mobilenav.active{color:#FFFFFF}
.sf-menu a.home:before{display:none}
#mobilenav:before{content:"\f0c9";top:3px;text-indent:0;right:7px;font-size:30px}
#menunav{float:none;display:none;position:absolute;top:45px;right:10px;left:10px;z-index:99;background-color:#333;padding:5px 10px}
#menunav li{float:none;margin:0}
#menunav > li{margin:1px 0}
.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;width:auto;height:auto;padding:0 10px;line-height:30px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D}
.sf-menu ul{position:static;padding-top:0}
.sf-menu ul li,.sf-menu ul ul li{background-color:transparent}
.sf-menu ul a{padding-right:20px}
.sf-menu ul ul a{padding-right:30px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:none}
.sf-menu li:hover > a,.sf-menu li.sfHover{background-color:transparent}
.sf-menu a.home,.sf-menu li:hover > a.home,.sf-menu > li > a.current{color:#FFFFFF;background-color:#15587D}
.sf-menu ul a:hover{padding-right:25px}
.sf-menu ul ul a:hover{padding-right:35px}
الخطوة الأخيرة آختر المكان المناسب بقالب مدونتك حيث تريد أن تظهر القائمة أو اسفل الهيدر
القائمة الثانية:
هذه القائمة خفيفة جداً وسهلة التركيب ايضاً كما انها تتضمن زر الترجمة التلقائي لاي موضوعمعاينة
طريقة تركيب القائمة
من خلال لوحة التحكم في مدونتك -->> القالب ثم أنقر على زر تحرير html الأن أبحث عن الرمز ]]> ثم أضف الكود التالي فوقه مباشرةً:
#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:right;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;left:9px}
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;left:0;right:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:right}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
هذا كان كل ما لدين اليوم نامل ان تكون قد نالت إعجابكم وإذا كان لديك أي إستفسار لا تتردد في طرحه.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)