قائمة منسدلة بتقنية CSS و javascript رائعة لمدونات بلوجر أحدث أشرطة القوائم المنسدلة

مداد الجليد
12 يناير, 2014
9
السلام عليكم ورحمة الله وبركاته
أقدم لكم اليوم قائمة منسدلة بتقنية css وجافاسكربت خفيفة وبألوان زاهية مرتبة متوافقة مع جميع الأجهزة اللوحية والكمبيوتر وأجهزة الهاتف المحمول إضافة لا بد منها إلى كل موقع ومدونة ومنتدى هذه الإضافة تمكنك بإضافة جميع أقسام مدونتك إليها أيضا تملك الإضافة زر مشاركة عشوائية يمكنكم مشاهدتها عبر المعاينة.

صورة الإضافة


مثال حي عن الإضافة إضغط هنا

كيفية الإضافة إلى مدونتك؟

 إنتقل إلى www.blogger.com ثم أختر القالب ثم إضغط على تحرير html
الآن بإستخدام مفتاح الإختصار إبحث عن الرمز ]]></b:skin>

 الآن أضف الكود التالي فوق الرمز  ]]></b:skin> مباشرةَ
/*----قائمة منسدلة www.madad2.com-----*/

.ranpost {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW1CWGR980GcYcl8dTgtvffliLSlsTjBtD_t6WuIXX_ed4iGX-e4vmEiCqmL4gP4nQAtDlmvbJ0QCSbFPOYUxdKL_vJk0ptq_r7chWnnr57s_4Iph4zeotoD_DKa2RcpaF9hZdGf2dPRI/s1600/ran-iconz.png") no-repeat scroll 15px 13px transparent;
cursor: pointer;
float: left !important;
margin-left: 10px;
width: 50px;
}
.ranpost:hover {
background-color: transparent !important;
}


#main-nav {
background:#2c2c2c;
margin:0 auto;
height:50px;
margin-bottom:-20px;
}
#main-nav .menu-alert{
float:right;
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size:16px;
position: relative;
display: inline-block;
float: right;
border:1px solid;
border-width:0 0 0 1px;
height:50px;
}
#main-nav ul li:first-child,
#main-nav ul li:first-child a{border:0 none;}
#main-nav ul li:last-child a{border-right:0 none;}
#main-nav ul li a {
display: inline-block;
height: 50px;
line-height: 50px;
color: #ddd;
padding:0 14px;
text-shadow:0 1px 1px #000;
border-right:1px solid #383838;
}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding:0;
position: absolute;
top: 50px;
width: 180px;
z-index: 99999;
float: right;
background: #2d2d2d !important;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border:0 none;
border-bottom: 1px solid #222;
border-top: 1px solid #383838;
font-size:13px;
height:auto;
margin:0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border:0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #ccc !important;
text-shadow:0 1px 1px #000 !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { color: #FFF ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-left:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:#d01f3c;
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-right:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 0 0 10px;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
right:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}
#menu-main a.home{text-indent:-9999px;padding:0;width:60px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbVRGt_ulzN4a5nc00SCV2fy89xXhpxlw-xcVnNOieTEaSF1p9T1mQD-hKYIe8pMHACbCrjdtseA62MVyOS98PTnR2fM69ri9s-x_kGXL0KIFNoQt2jRFWHYazvBzaGquyTJ4sxW50B0o/s1600/bhome.png);background-position:center;background-repeat:no-repeat}
/*------ home page www.madad2.com-----------*/
#content-wrap{
float:right;
width:100%;
max-width:960px;
}
#content{
float:right;
width:100%;
max-width:620px;
}t:1.4em;color:#0e0e0e;display:block;margin:5px 0 0;max-height:36px;overflow:hidden}
/*------ نهاية قائمة منسدلة www.madad2.com-----------*/

ثم قم بالبحث عن الرمز </head>
 ثم أضف الكود التالي فوقه مباشرةَ

<script type='text/javascript'>
      //<![CDATA[
      function showLucky(root){
        var feed = root.feed;
        var entries = feed.entry || [];
        var entry = feed.entry[0];
        for (var j = 0; j < entry.link.length; ++j) {
          if (entry.link[j].rel == "alternate") { 
            window.location = entry.link[j].href; 
          } 
        } 
      }
      function fetchLuck(luck){
        script = document.createElement('script');
        script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
        script.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(script);
      }
      function readLucky(root){
        var feed = root.feed;
        var total = parseInt(feed.openSearch$totalResults.$t,10);
        var luckyNumber = Math.floor(Math.random()*total);
        luckyNumber++;
        fetchLuck(luckyNumber);
      }
      function feelingLucky(){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
        document.getElementsByTagName('head')[0].appendChild(script);
      }
      //]]>
</script>
<style>
          .blog-posts.hfeed {
          }
        </style>
<style>
      
      
      #singlepage {
        display:none;
        visibility:hidden;
      }
    
    </style>

<script type='text/javascript'>
      //<![CDATA[ 
      jQuery(document).ready(function($){
        $(window).load(function(){
          $('.flexslider').flexslider({
            animation: "fade",
            slideshow: true,
            directionNav:true,
            slideshowSpeed: 5000,controlNav: true,
            smoothHeight: true,
            slideDirection: 'horizontal'
          });
          jQuery('.slides').addClass('loaded');
        }); 
        var aboveHeight = $('#leader-wrapper').outerHeight();
        $(window).scroll(function(){
          if ($(window).scrollTop() > aboveHeight){
            $('#main-nav').addClass('fixed-nav').css('top','0').next()
            .css('padding-top','43px');
          } else {
            $('#main-nav').removeClass('fixed-nav').next()
            .css('padding-top','0');
          }
        });
      });
      //]]>
</script>

الآن أختر المكان الذي تريد الإضافة أن تظهر به يمكنك إضافتها داخل القالب أسفل رأس المدونة وهو أنسب مكان أسفل </header> أو أسفل <header> أو عن طريق التخطيط ثم أداة HTML/JavaScript ثم إضافة الكود التالي


<style type='text/css'>
            .main-menu .menu li.green a:hover { background-color: #8FC821 !important;}.main-menu .menu li.green:hover > a { background-color: #8FC821 !important;}.main-menu .menu li.yellow a:hover { background-color: #F39C12 !important;}.main-menu .menu li.yellow:hover > a { background-color: #F39C12 !important;}.main-menu .menu li.red a:hover { background-color: #E8373E !important;}.main-menu .menu li.red:hover > a { background-color: #E8373E !important;}.main-menu .menu li.orange a:hover { background-color: #FE6600 !important;}.main-menu .menu li.ornage:hover > a { background-color: #FE6600 !important;}.main-menu .menu li.green-2 a:hover { background-color: #accc46 !important;}.main-menu .menu li.green-2:hover > a { background-color: #accc46 !important;}.main-menu .menu li.blue a:hover { background-color: #2950A3 !important;}.main-menu .menu li.blue:hover > a { background-color: #2950A3 !important;}.main-menu .menu li.green-3 a:hover { background-color: #1abc9c !important;}.main-menu .menu li.green-3:hover > a { background-color: #1abc9c !important;}.main-menu .menu li.pink a:hover { background-color: #D90162 !important;}.main-menu .menu li.pink:hover > a { background-color: #D90162 !important;}
          </style>
<nav id='main-nav'>
<div class='container'>
<div class='main-menu'>
<ul class='menu' id='menu-main'>
<li class='green'>
<a class='home' href='/'>
                      الرئيسية
                    </a>
</li>
<li class='red'>
<a href='#'>
                      قائمة
                    </a>
<ul class='sub-menu'>
<li>
<a href='#'>
تعديل1
                        </a>
</li>
<li>
<a href='#'>
تعديل2
                        </a>
</li>
<li>
<a href='#'>
تعديل3                        </a>
</li>
<li>
<a href='#'>
تعديل 4                        </a>
</li>
</ul>
</li>
<li class='yellow'>
<a href=''>
قائمة 2                    </a>
<ul class='sub-menu'>
<li>
<a href='#'>
تعديل 1
                        </a>
</li>
<li>
<a href='#'>
تعديل 2
                        </a>
</li>
<li>
<a href='#'>
تعديل 3
                        </a>
</li>
<li>
<a href='#'>
تعديل 4
                        </a>
</li>
</ul>
</li>
<li class='green-2'>
<a href='#'>
قائمة 3
                    </a>
</li>
<li class='orange'>
<a href='#'>
قائمة 4
                    </a>
<ul class='sub-menu'>
<li>
<a href='#'>
تعديل 1
                        </a>
</li>
<li>
<a href='#'>
تعديل 2
                        </a>
</li>
<li>
<a href='#'>
تعديل 3
                        </a>
</li>
</ul>
</li>
<li class='pink'>
<a href='#'>
                      قائمة 5
                    </a>
<ul class='sub-menu'>
<li>
<a href='#'>
                          تعديل 1
                        </a>
</li>
<li>
<a href='#'>
                          تعديل 2
                        </a>
</li>
<li>
<a href='#'>
                          تعديل 3
                        </a>
</li>
<li>
<a href='#'>
تعديل 4
                        </a>
</li>
</ul>
</li>
<li class='green-3'>
<a href='#'>
قائمة 7
</a>
</li>
<li class='blue'><a href='#'>الزهاب إلى الاضافة</a>
</li>
<li class='ranpost'>
<a onclick='feelingLucky();'></a>
</li>
</ul>
</div>
</div>
</nav>
لا تنسى تغيير # برابط القسم الذي ترغب فيه وتعديل الكلمات بما تناسبك

 اتمنى ان تكون مفيدة لكم بالتوفيق.


مشاركات أقدم المقال التالي
9 تعليق
  • Unknown
    Unknown 15‏/01‏/2014، 5:47:00 ص

    شكرا

    • مداد الجليد
      مداد الجليد 15‏/01‏/2014، 7:00:00 ص

      عفواً، شرفت بمرورك

    رد
  • يحيى عبسي
    يحيى عبسي 24‏/06‏/2014، 6:31:00 م

    شكرا اخي اضافة رائعة و مهمة

    • مداد الجليد
      مداد الجليد 24‏/06‏/2014، 8:28:00 م

      عفواً أخي, وأنا شاكر مرورك الكريم

    رد
  • Unknown
    Unknown 27‏/12‏/2014، 9:56:00 م

    رووووووووووووعة

    رد
  • Unknown
    Unknown 14‏/04‏/2016، 7:30:00 م

    يعطيك العافيه بس فسري هذه (لا تنسى تغيير # برابط القسم الذي ترغب فيه وتعديل الكلمات بما تناسبك)

    • مداد الجليد
      مداد الجليد 17‏/04‏/2016، 6:35:00 م

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

    رد
  • غير معرف
    غير معرف 23‏/08‏/2017، 3:28:00 ص

    شكرا اخي فقط اين وكيف اضع ملفات للتحميل يظهر للمستخدم نافذة التحميل دون الاضطرار لفتح الملف وفي اي موقع احفظ الملفات هل في google drive?

    • مداد الجليد
      مداد الجليد 23‏/08‏/2017، 9:26:00 م

      العفو اخي
      هذه الخاصية غير متوفرة في جوجل دريف لحماية المستخدمين

    رد
أضف تعليق
عنوان التعليق