الرئيسية أفضل قائمة منسدلة لمدونات بلوجر

أفضل قائمة منسدلة لمدونات بلوجر


أفضل قائمة منسدلة لمدونات بلوجر

 طريقة تركيب القائمة المنسدلة على مدونات بلوجر



ستظهر لك نافذه جديدة اختار منها
HTML/JavaScript





قم بـ نسخ و لصق الكود التالي
<style type='text/css'>
.orion-menu{
 width: 100%;
 padding: 0;
 position: relative;
 float: right;
 background: #241E1D;
 list-style: none;
 font-family: 'Roboto Condensed', sans-serif;
}
.orion-menu li {
 display: inline-block;
 font-size: 15px;
 margin: 0;
 padding: 0;
 float: right;
 line-height: 20px;
 position: relative;
}
.orion-menu li a {
 padding: 24px 22px 24px;
 color: #bababa;
 text-decoration: none;
 display: inline-block;
 -o-transition: color .3s linear, background .3s linear;
 -webkit-transition: color .3s linear, background .3s linear;
 -moz-transition: color .3s linear, background .3s linear;
 transition: color .3s linear, background .3s linear; 
}
.orion-menu li:hover > a{
 color: #fff;
}
.orion-menu li.active > a{
 background: #555555;
}
.orion-menu > li > a {
 text-transform: uppercase;
}

/* DROPDOWN */
.orion-menu ul, 
.orion-menu ul li ul {
 list-style: none;
    margin: 0;
    padding: 0;    
 display: none;
    position: absolute;
    z-index: 999;
 width: 150px;
 background: #454545;
}
.orion-menu ul{
    top: 68px;
    right: 0;
}
.orion-menu ul li ul{
    top: 0;
    right: 150px;
}
.orion-menu ul li{
 clear:both;
 width:100%;
 font-size:14px;
}
.orion-menu ul li a {
 width:100%;
 padding:12px 22px;
 display:inline-block;
 float:right;
 clear:both;
 box-sizing:border-box;
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box;
}
.orion-menu ul li:hover > a{
 background: #555555;
}

/* DROPDOWN ARROWS*/
.orion-menu .indicator{
 color: #bababa;
 position: absolute;
 right: 8px;
 top: 24px;
 font-family: 'FontAwesome';
 font-size: 12px;
}
.orion-menu .indicator:before{
 content: "\f0d7";
}
.orion-menu ul li .indicator{
 left: 20px;
 top: 13px;
}
.orion-menu ul li .indicator:before{
 content: "\f0da";
}


/* SOCIAL ICONS*/
.orion-menu li.social{
 float: left;
 margin-left: 20px;
}
.orion-menu li.social a{
 display: inline-block;
 padding: 24px 6px 24px;
 color: #bababa;
 position: relative;
 width: 15px;
 text-align: center;
}
.orion-menu li.social a:hover{
 color: #fff;
}
.orion-menu li.social a .tooltip{
 width: 70px;
 padding: 5px;
 background: #555555;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 opacity: 0;
 position: absolute;
 font-size: 9px;
 top: -20px;
 left: -27px;
 border-radius: 2px;
 text-align: center;
 -o-transition: opacity .3s linear;
 -webkit-transition: opacity .3s linear;
 -moz-transition: opacity .3s linear;
 transition: opacity .3s linear;
}
.orion-menu li.social a:hover .tooltip{
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 opacity: 1;
}
.orion-menu li.social a .tooltip:before,
.orion-menu li.social a .tooltip:after{
 content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #555555;
}


/* COLLAPSIBLE CONFIGURATION */
.orion-menu > li.showhide{
 display: none;
 width: 100%;
 height: 50px;
 cursor: pointer;
 color: #dedede;
 background: #454545;
}
.orion-menu > li.showhide span.title{
 margin: 16px 0 0 18px;
 float: right;
}
.orion-menu> li.showhide span.icon{
 margin: 17px 20px;
 float: left;
}
.orion-menu > li.showhide .icon em{
 margin-bottom: 3px;
 display: block;
 width: 20px;
 height: 2px;
 background: #ccc;
}


/* blue */
.blue, .blue li ul, .blue ul li ul, .blue > li.showhide{ background: #008C9E; }
.blue li a, .orion-menu li.social a{ color: #dedede; }
.blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; }
.blue li.search form input.search:focus{ background-color: #009fb4; }
.blue li.social a .tooltip:before, .blue li.social a .tooltip:after{ border-top-color: #009fb4; }



@media only screen and (max-width: 768px) {
 .orion-menu{
  margin: 0;
  display: block;
 }
 .orion-menu li{
  display: block;
  width: 100%;
 }
 .orion-menu > li > a{
  padding: 16px 70px 16px 18px;
  text-align: left;
  border-top: solid 1px rgba(255, 255, 255, 0.05);
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box;
 }
 .orion-menu a{
  width: 100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu ul, 
 .orion-menu ul li ul{
  width: 100%;
  left: 0;
  padding: 0 20px;
  position: static;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu .indicator{
  right: 20px;
  top: 18px;
 }
 .orion-menu ul li .indicator{
  display: block;
 }
 .orion-menu ul li .indicator:before{
  content: "\f0d7";
 }
 .orion-menu li.search{
  border-bottom: none;
 }
 .orion-menu li.search form{
  margin: 20px 18px 0 18px;
 }
 .orion-menu li.search form input.search,
 .orion-menu li.search form input.search:focus{
  width: 100%;
  color: #fff;
  background-color: #555555;
  background-position: 99% 8px;
  cursor: auto;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }

 .orion-menu li.social a{
  display: inline;
  padding: 8px 15px 8px 15px;
  border: none;
 }
 .orion-menu li.social a:hover{
  color: #fff;
 }
 .orion-menu li.social a:hover .tooltip{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0;
 }
 .orion-menu > li.showhide{
  display: block;
 }
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

$.fn.orion = function(options){
 var settings = {
  speed     : 300,         // dropdown speed (ms)
  animation   : "fading",    // dropdown or panel animation
  indicator   : true     // dropdown indicator
 }
 $.extend( settings, options );
 $(".orion-menu").prepend("<li class='showhide'><span class='title'>القائمة</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");

 var firstClick = 0;

 if(settings.indicator == true){
  $(".orion-menu").find("li").each(function(){
   if($(this).children("ul").length > 0){
    $(this).append("<span class='indicator'></span>");
   }
  });
 }

 detectScreen();

 $(window).resize(function() {
  detectScreen();
 });

 function detectScreen(){
  $(".orion-menu").find("li, a").unbind();
  $(".orion-menu").find("ul").hide(0);
  if(window.innerWidth <= 768){
   showCollapse();
   bindClick();
   if(firstClick == 0){
    $(".orion-menu > li:not(.showhide)").hide(0);
   }
  }
  else{
   hideCollapse();
   bindHover();
  }
 }

 function bindHover(){
  $(".orion-menu li").bind("mouseover", function(){
   $(this).children("ul").stop(true, true).fadeIn(settings.speed).addClass(settings.animation);
  }).bind("mouseleave", function(){
   $(this).children("ul").stop(true, true).fadeOut(settings.speed).removeClass(settings.animation);
  });  
 }
 function bindClick(){  
  $(".orion-menu li:not(.showhide)").each(function(){
   if($(this).children("ul").length > 0){
    $(this).children("a").bind("click", function(){
     $(this).siblings("ul").slideToggle(settings.speed).addClass(settings.animation);
     firstClick = 1;
    });
   }
  });
 }
 function showCollapse(){
  $(".orion-menu > li.showhide").show(0);
  $(".orion-menu > li.showhide").bind("click", function(){
   if($(".orion-menu > li").is(":hidden")){
    $(".orion-menu > li").slideDown(300);
    firstClick = 1;
   }
   else{
    $(".orion-menu > li:not(.showhide)").slideUp(300);
    $(".orion-menu > li.showhide").show(0);
    firstClick = 0;
   }
  });
 }
 function hideCollapse(){
  $(".orion-menu > li").show(0);
  $(".orion-menu > li.showhide").hide(0);
 }
}
$(document).ready(function(){
    $(".panel a").click(function(e){
     e.preventDefault();
     var style = $(this).attr("class");
     $(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(style);
    });
   });
jQuery(document).ready(function(){  
    $().orion({
     speed: 500
    });
   });
});//]]>  

</script>




  
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>    </script>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

<ul class="orion-menu">
   <li>
                <a href='/'>
                  الرئيسية
                </a>
              </li>
              <li>
                <a href='#'>
                  صور
                </a>
                <ul>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      صور
                    </a>
                  </li>
                  <li>
                    <a href='http://http://q4q4.blogspot.com/'>
                      رمزيات
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/A'>
                      خلفيات
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      صور صباح ومساء الخير
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      خلفية الأسبوع
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      صور مدهشة
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      صور فوتوغرافية
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      صور مضحكة
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='http://q4q4.blogspot.com/' target='_blank'>
                  بلوجر
                </a>
              </li>
              <li>
                <a href='#'>
                  برامج
                </a>
                <ul>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      برامج الكمبيوتر
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      برامج الهاتف
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      اندرويد
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      العاب
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  إسلاميات
                </a>
                <ul>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      القران الكريم
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/'>
                      اسلاميات
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات تحرير الصور
                </a>
                <ul>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href=http://q4q4.blogspot.com/' target='_blank'>
                      2محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href='http://www.photoshop-online.madad2.com/' target='_blank'>
                      فوتوشوب أون لاين
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات
                </a>
                <ul>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      تحويل كود أدسنس
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      أعرف IP جهازك
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      عداد الأحرف
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      صانع اكواد الالوان
                    </a>
                  </li>
                  <li>
                    <a href=http://q4q4.blogspot.com/' target='_blank'>
                      أداة تشفير/ فك تشفير HTML JavaScript
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      أكتب أسمك على شكل قلب حب&#9829;
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      زخرف اسمك
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  روابط مفيدة
                </a>
                <ul>
                  <li>
                    <a href='http://flash-girls.blogspot.com/' target='_blank'>
                      ألعاب فلاش أون لاين
                    </a>
                  </li>
                  <li>
                    <a href='http://mdadalgled.blogspot.com/' target='_blank'>
                      أجمل الخلفيات HD
                    </a>
                  </li>
                  <li>
                    <a href='http://androidarbi.blogspot.com/' target='_blank'>
                      تطبيقات الاندرويد
                    </a>
                  </li>
                  <li>
                    <a href='http://www.templates.madad2.com/' target='_blank'>
                      قوالب بلوجر
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  المزيد..
                </a>
                <ul>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      أتصل بنا
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      خريطة المدونة
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      إنضم إلينا
                    </a>
                  </li>
                  <li>
                    <a href='http://q4q4.blogspot.com/' target='_blank'>
                      قسم المساعدة
                    </a>
                  </li>
                </ul>
              </li>
    <li class="social">
     <a href="http://www.facebook.com/ComputerForumkings?ref=bookmarks"><i class="icon-facebook"></i><span class="tooltip">Facebook</span></a>
     <a href="http://twitter.com/Khder_2005"><i class="icon-twitter"></i><span class="tooltip">Twitter</span></a>
     <a href="http://www.pinterest.com/kamalkhder/"><i class="icon-pinterest"></i><span class="tooltip">Pinterest</span></a>
     <a href="https://plus.google.com/u/0/+KamKhder"><i class="icon-google-plus"></i><span class="tooltip">Google Plus</span></a>
    </li>

   </ul>
 ثم التعديل على الروابط بما تناسبك ثم حفظ

بقلم المهندس كمال خضر

مبرمج متخصص

ليست هناك تعليقات:

الاشتراك في: تعليقات الرسالة (Atom)