Gy3ZRPV8SYZ53gDjSFGpi7ej1KCaPY791pMbjB9m
Fourni par Blogger
Images de thèmes de Igniel

Signaler un abus

Rechercher dans ce blog

Bookmark

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

Author
Author
... menit baca
Dengarkan


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






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


الدخول إلى لوحة تحكم بلوجر https://www.blogger.com القالب ->> ثم انقر على تحرير Html

الآن يجب التأكد من وجود إصدار من إصدارات ajax اجاكس يمكنك البحث داخل القالب لديك عن كلمة ajax إذا كان لديك كود شبيه للكود التالي لا حاجة لإضافة الكود التالي مرة أخرى إذا لم يكن لديك هذا الكود قم بإضافته فوق الرمز </head>
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

الآن يجب يجب التحقق ما إذا كان لديك خط awesome إذا لم يكن لديك أيضاً أضف الكود التالي فوق الرمز </head> مجدداً


    <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
ثم كود جافا سكربت يجب إضافته فوق الرمز </head> أيضاً







<script type='text/javascript'>//<![CDATA[ 

$(window).load(function(){



var settings = {

$.fn.orion = function(options){


animation   : "fading",    // dropdown or panel animation

  speed     : 300,         // dropdown speed (ms)


$(".orion-menu").prepend("<li class='showhide'><span class='title'>القائمة</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");

  indicator   : true     // dropdown indicator
 }
 $.extend( settings, options );
 


$(".orion-menu").find("li").each(function(){

 var firstClick = 0;
 
 if(settings.indicator == true){
   if($(this).children("ul").length > 0){


$(window).resize(function() {

    $(this).append("<span class='indicator'></span>");
   }
  });
 }
 
 detectScreen();
 
  detectScreen();
 });
 
 function detectScreen(){


if(firstClick == 0){

  $(".orion-menu").find("li, a").unbind();
  $(".orion-menu").find("ul").hide(0);
  if(window.innerWidth <= 768){
   showCollapse();
   bindClick();


$(".orion-menu li").bind("mouseover", function(){

    $(".orion-menu > li:not(.showhide)").hide(0);
   }
  }
  else{
   hideCollapse();
   bindHover();
  }
 }

 function bindHover(){


$(this).children("ul").stop(true, true).fadeOut(settings.speed).removeClass(settings.animation);

   $(this).children("ul").stop(true, true).fadeIn(settings.speed).addClass(settings.animation);
  }).bind("mouseleave", function(){
  });  
 }
 function bindClick(){  
  $(".orion-menu li:not(.showhide)").each(function(){


function showCollapse(){

   if($(this).children("ul").length > 0){
    $(this).children("a").bind("click", function(){
     $(this).siblings("ul").slideToggle(settings.speed).addClass(settings.animation);
     firstClick = 1;
    });
   }
  });
 }


$(".orion-menu > li:not(.showhide)").slideUp(300);

  $(".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.showhide").show(0);


var style = $(this).attr("class");

    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();


</script>

     $(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(style);
    });
   });
jQuery(document).ready(function(){  
    $().orion({
     speed: 500
    });
   });
});//]]>
ثم إضافة css فوق الرمز ]]></b:skin>

.orion-menu{



 width: 100%;

 padding: 0;


position: relative;

float: right;


list-style: none;

background: #252525;


font-family: 'Roboto Condensed', sans-serif;

}
.orion-menu li {
 display: inline-block;
 font-size: 15px;


position: relative;

margin: 0;
 padding: 0;
 float: right;
 line-height: 20px;
}


text-decoration: none;

.orion-menu li a {
 padding: 24px 22px 24px;
 color: #bababa;


-webkit-transition: color .3s linear, background .3s linear;

display: inline-block;
 -o-transition: color .3s linear, background .3s linear;


transition: color .3s linear, background .3s linear; 

-moz-transition: color .3s linear, background .3s linear;
}
.orion-menu li:hover > a{
 color: #fff;
}
.orion-menu li.active > a{


list-style: none;

background: #555555;
}
.orion-menu > li > a {
 text-transform: uppercase;
}

/* DROPDOWN */
.orion-menu ul, 
.orion-menu ul li ul {
    margin: 0;


right: 0;

padding: 0;    
 display: none;
    position: absolute;
    z-index: 999;
 width: 150px;
 background: #454545;
}
.orion-menu ul{
    top: 68px;
}


padding:12px 22px;

.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%;


background: #555555;

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{
}



.orion-menu .indicator:before{

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


margin-left: 20px;

.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;
}
.orion-menu li.social a{


width: 70px;

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{
 padding: 5px;


-o-transition: opacity .3s linear;

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;


.orion-menu li.social a .tooltip:before,

-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;
}


border-top: 8px solid #555555;

.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;
}




.orion-menu> li.showhide span.icon{

/* 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;
}
 margin: 17px 20px;
 float: left;
}


.blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; }

.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.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{


.orion-menu ul li ul{

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, 
  width: 100%;
  left: 0;


.orion-menu li.search form{

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;
 }
  margin: 20px 18px 0 18px;
 }


border: none;

.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;
 }
 .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;


}

الآن الإضافة الأخيرة يجب ان تضعها بالقالب في المكان حيث تريد ظهور القائمة على سبيل المثال فوق الرمز:

 <div class='outerpic-wrapper'>



<ul class="orion-menu">

   <li>


<a href='/'>

الرئيسية


</li>

</a>
              <li>


<a href='http://www.ma3lomapf.blogspot.com/search/label/بلوجر' target='_blank'>

بلوجر
                </a>
              </li>
              <li>
                <a href='#'>


برامج الكمبيوتر

برامج
                </a>
                <ul>
                  <li>
                    <a href='#'>


برامج الهاتف

</a>
                  </li>
                  <li>
                    <a href='#'>
                    </a>


</li>

</li>
                  <li>
                    <a href='#'>
                      اندرويد
                    </a>


</ul>

<li>
                    <a href='#'>
                      العاب
                    </a>
                  </li>
              </li>


<a href='#'>

<li>
                <a href='#'>
                  إسلاميات
                </a>
                <ul>
                  <li>


</a>

القران الكريم
                    </a>
                  </li>
                  <li>
                    <a href='#'>
                      اسلاميات


<ul>

</li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات تحرير الصور
                </a>
                  <li>


<a href='http://www.ma3lomapf.blogspot.com/p/blog-page_23.html' target='_blank'>

<a href='http://www.ma3lomapf.blogspot.com/p/blog-page_27.html' target='_blank'>
                      محرر الصور
                    </a>
                  </li>
                  <li>
                      2محرر الصور
                    </a>
                  </li>


<a href='#'>

<li>
                    <a href='http://www.ma3lomapf.blogspot.com/' target='_blank'>
                      فوتوشوب أون لاين
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                  أدوات


<a href='http://www.ma3lomapf.blogspot.com/p/blog-page_10.html' target='_blank'>

                </a>
                <ul>
                  <li>
                    <a href='http://www.ma3lomapf.blogspot.com/p/blog-page_3482.html' target='_blank'>
                      تحويل كود أدسنس
                    </a>
                  </li>
                  <li>
                      أعرف IP جهازك


<a href='http://www.ma3lomapf.blogspot.com/p/blog-page_26.html' target='_blank'>

</a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'>
                      عداد الأحرف
                    </a>
                  </li>
                  <li>


<li>

صانع اكواد الالوان
                    </a>
                  </li>
                  <li>
                    <a href='http://www.ma3lomapf.blogspot.com/p/html-javascribt.html' target='_blank'>
                      أداة تشفير/ فك تشفير HTML JavaScript
                    </a>
                  </li>


</a>

<a href='http://www.ma3lomapf.blogspot.com/2014/07/stylish-fonts-for-facebook-2015.html' target='_blank'>
                      زخرف اسمك
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  روابط مفيدة
                <ul>
                  <li>


<a href='http://www.ma3lomapf.blogspot.com/' target='_blank'>

<a href='http://www.ma3lomapf.blogspot.com/' target='_blank'>
                      ألعاب فلاش أون لاين
                    </a>
                  </li>
                  <li>
                    <a href='http://www.ma3lomapf.blogspot.com/' target='_blank'>
                      أجمل الخلفيات HD
                    </a>
                  </li>
                  <li>
                      تطبيقات الاندرويد


<a href='http://www.ma3lomapf.blogspot.com/p/blog-page_17.html' target='_blank'>

</a>
                  </li>
                  <li>
                    <a href='http://www.ma3lomapf.blogspot.com/' target='_blank'>
                      قوالب بلوجر
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  المزيد..
                </a>
                <ul>
                  <li>
                      أتصل بنا


</li>

</a>
                  </li>
                  <li>
                    <a href='http://www.ma3lomapf.blogspot.com/p/bptoc-border-0px-solid-000000.html' target='_blank'>
                      خريطة المدونة
                    </a>
                  </li>
                  <li>
                    <a href='http://www.ma3lomapf.blogspot.com/p/blog-page_3585.html' target='_blank'>
                      إنضم إلينا
                    </a>
                  <li>


<a href="http://www.facebook.com/abdo.ouzay"><i class="icon-facebook"></i><span class="tooltip">Facebook</span></a>

<a href='http://www.ma3lomapf.blogspot.com/p/blog-page_3.html' target='_blank'>
                      قسم المساعدة
                    </a>
                  </li>
                </ul>
              </li>
    <li class="social">




     <a href="http://twitter.com/xxx"><i class="icon-twitter"></i><span class="tooltip">Twitter</span></a>


<a href="http://www.pinterest.com/xxx/"><i class="icon-pinterest"></i><span class="tooltip">Pinterest</span></a>



<a href="https://plus.google.com/xxxx"><i class="icon-google-plus"></i><span class="tooltip">Google Plus</span></a>

    </li>


</ul>

غير الروابط بما تناسبك ثم حفظ القالب ثم معاينة.


هذا كل شيء عن طريقة تركيب قائمة منسدلة إحترافية 

طريقة سهلة

هناك طريقة سهلة أخرى لتركيب القائمة المنسدلة عن طريق الذهاب إلى لوحة التحكم -->> التخطيط -->> ثم إضافة أداة ثم إختيار أداة جافا سكربت HTML/JavaScript ثم لصق الكود التالي داخل الأداة:

  <style type='text/css'>

.orion-menu{


padding: 0;

width: 100%;


float: right;

position: relative;


list-style: none;

background: #252525;


font-family: 'Roboto Condensed', sans-serif;

}
.orion-menu li {
 display: inline-block;
 font-size: 15px;


position: relative;

margin: 0;
 padding: 0;
 float: right;
 line-height: 20px;
}


text-decoration: none;

.orion-menu li a {
 padding: 24px 22px 24px;
 color: #bababa;


-webkit-transition: color .3s linear, background .3s linear;

display: inline-block;
 -o-transition: color .3s linear, background .3s linear;


transition: color .3s linear, background .3s linear; 

-moz-transition: color .3s linear, background .3s linear;
}
.orion-menu li:hover > a{
 color: #fff;
}
.orion-menu li.active > a{


list-style: none;

background: #555555;
}
.orion-menu > li > a {
 text-transform: uppercase;
}

/* DROPDOWN */
.orion-menu ul, 
.orion-menu ul li ul {
    margin: 0;


right: 0;

padding: 0;    
 display: none;
    position: absolute;
    z-index: 999;
 width: 150px;
 background: #454545;
}
.orion-menu ul{
    top: 68px;
}


padding:12px 22px;

.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%;


background: #555555;

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{
}



.orion-menu .indicator:before{

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


margin-left: 20px;

.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;
}
.orion-menu li.social a{


width: 70px;

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{
 padding: 5px;


-o-transition: opacity .3s linear;

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;


.orion-menu li.social a .tooltip:before,

-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;
}


border-top: 8px solid #555555;

.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;
}




.orion-menu> li.showhide span.icon{

/* 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;
}
 margin: 17px 20px;
 float: left;
}


.blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; }

.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.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{


.orion-menu ul li ul{

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, 
  width: 100%;
  left: 0;


.orion-menu li.search form{

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;
 }
  margin: 20px 18px 0 18px;
 }


border: none;

.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;
 }
 .orion-menu li.social a:hover{
  color: #fff;
 }


animation   : "fading",    // dropdown or panel animation

.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)
  indicator   : true     // dropdown indicator
 }
 $.extend( settings, options );


function detectScreen(){

$(".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();
 });
 
  $(".orion-menu").find("li, a").unbind();
  $(".orion-menu").find("ul").hide(0);
  if(window.innerWidth <= 768){
   showCollapse();
   bindClick();


$(this).children("a").bind("click", function(){

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){


$(document).ready(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);
 }
}
    $(".panel a").click(function(e){


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>    </script>

e.preventDefault();
     var style = $(this).attr("class");
     $(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(style);
    });
   });
jQuery(document).ready(function(){  
    $().orion({
     speed: 500
    });
   });
});//]]>  

</script>


</head>
<body>
  




<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>


<ul class="orion-menu">




<li>



<a href='/'>

                  الرئيسية


</li>

                </a>
              <li>


صور

                <a href='#'>
                </a>


<a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1'>

                <ul>
                  <li>
                      صور


<li>

                    </a>
                  </li>


<a href='http://www.madad2.com/search/label/%D8%B1%D9%85%D8%B2%D9%8A%D8%A7%D8%AA'>

                      رمزيات
                    </a>
                  </li>
                  <li>


</a>

                    <a href='http://www.madad2.com/search/label/%D8%AE%D9%84%D9%81%D9%8A%D8%A7%D8%AA'>
                      خلفيات
                  </li>
                  <li>


صور صباح ومساء الخير

                    <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%B3%D8%A7%D8%A1%20%D9%88%D8%B5%D8%A8%D8%A7%D8%AD%20%D8%A7%D9%84%D8%AE%D9%8A%D8%B1'>
                    </a>
                  </li>
                  <li>


<a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%AF%D9%87%D8%B4%D8%A9'>

                    <a href='http://www.madad2.com/search/label/%D8%AE%D9%84%D9%81%D9%8A%D8%A9%20%D8%A7%D9%84%D8%A3%D8%B3%D8%A8%D9%88%D8%B9'>
                      خلفية الأسبوع
                    </a>
                  </li>
                  <li>
                      صور مدهشة
                    </a>
                  </li>
                  <li>


صور مضحكة

                    <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%81%D9%88%D8%AA%D9%88%D8%BA%D8%B1%D8%A7%D9%81%D9%8A%D8%A9'>
                      صور فوتوغرافية
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%B6%D8%AD%D9%83%D8%A9'>
                    </a>
                  </li>
                </ul>
              </li>
              <li>


</a>

                <a href='http://www.madad2.com/search/label/بلوجر' target='_blank'>
                  بلوجر
                </a>
              </li>
              <li>
                <a href='#'>
                  برامج
                </a>
                <ul>
                  <li>
                    <a href='http://www.madad2.com/search/label/%D8%A8%D8%B1%D8%A7%D9%85%D8%AC%20%D8%A7%D9%84%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1'>
                      برامج الكمبيوتر
                  </li>
                  <li>


العاب

                    <a href='http://www.madad2.com/search/label/%D8%A8%D8%B1%D8%A7%D9%85%D8%AC%20%D8%A7%D9%84%D9%87%D8%A7%D8%AA%D9%81'>
                      برامج الهاتف
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/search/label/%D8%A7%D9%86%D8%AF%D8%B1%D9%88%D9%8A%D8%AF'>
                      اندرويد
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/search/label/%D8%A7%D9%84%D8%B9%D8%A7%D8%A8'>
                    </a>
                  </li>
                </ul>
              </li>
              <li>


<ul>

                <a href='#'>
                  إسلاميات
                </a>
                <ul>
                  <li>
                    <a href='http://www.madad2.com/p/blog-page_11.html'>
                      القران الكريم
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/search/label/%D8%A7%D8%B3%D9%84%D8%A7%D9%85%D9%8A%D8%A7%D8%AA'>
                      اسلاميات
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات تحرير الصور
                </a>
                  <li>


</a>

                    <a href='http://www.madad2.com/p/blog-page_27.html' target='_blank'>
                      محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/p/blog-page_23.html' target='_blank'>
                      2محرر الصور
                    </a>
                  </li>
                  <li>
                    <a href='http://www.photoshop-online.madad2.com/' target='_blank'>
                      فوتوشوب أون لاين
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  أدوات
                <ul>
                  <li>


</a>

                    <a href='http://www.madad2.com/p/blog-page_3482.html' target='_blank'>
                      تحويل كود أدسنس
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/p/blog-page_10.html' target='_blank'>
                      أعرف IP جهازك
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'>
                      عداد الأحرف
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/p/blog-page_26.html' target='_blank'>
                      صانع اكواد الالوان
                  </li>
                  <li>


<li>

                    <a href='http://www.madad2.com/p/html-javascribt.html' target='_blank'>
                      أداة تشفير/ فك تشفير HTML JavaScript
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/2013/10/Decoration-2014.html' target='_blank'>
                      أكتب أسمك على شكل قلب حب&#9829;
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/2014/07/stylish-fonts-for-facebook-2015.html' target='_blank'>
                      زخرف اسمك
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href='#'>
                  روابط مفيدة
                </a>
                <ul>
                    <a href='http://flash-girls.blogspot.com/' target='_blank'>


<a href='http://www.madad2.com/p/blog-page_17.html' 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>
                  </li>


<a href="http://www.pinterest.com/mohammedsyria/"><i class="icon-pinterest"></i><span class="tooltip">Pinterest</span></a>

                  <li>
                    <a href='http://www.madad2.com/p/bptoc-border-0px-solid-000000.html' target='_blank'>
                      خريطة المدونة
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/p/blog-page_3585.html' target='_blank'>
                      إنضم إلينا
                    </a>
                  </li>
                  <li>
                    <a href='http://www.madad2.com/p/blog-page_3.html' target='_blank'>
                      قسم المساعدة
                    </a>
                  </li>
                </ul>
              </li>
    <li class="social">
     <a href="http://www.facebook.com/mdadice"><i class="icon-facebook"></i><span class="tooltip">Facebook</span></a>
     <a href="http://twitter.com/mohammed1811990"><i class="icon-twitter"></i><span class="tooltip">Twitter</span></a>





     <a href="https://plus.google.com/+مدادالجليد"><i class="icon-google-plus"></i><span class="tooltip">Google Plus</span></a>
    </li>


</ul>

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


ملاحظة تستطيع حذف أو زيادة الروابط
Related Posts
2 commentaires
Publié par:
Author
Author

Related Posts

2 commentaires

  • Bassam Husain
    Bassam Husain
    27 octobre 2015 à 10:11
    القائمة ملغومة انتم نصابين انت وصاحب مدونة مداد الجليد
    Reply
  • Editorial Staff
    Editorial Staff
    15 janvier 2015 à 07:01
    انت سرقة من مدونة مداد الجليد
    Reply