قائمة منسدلة - 6

لقد قمت في السابق بتقديم قائمة منسدلة بأشكال متعددة و ألوان رائعة...اليوم أقدم لكم قائمة منسدلة جديدة جميلة جدا...

                  تركيب قائمة منسدلة :                       

1- من لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة html/javascript

2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)

<style>

    /*------ CSS3 Drop Down Menu By JEHHAD (www.rydnet.blogspot.com)---------*/

    #mbt-menu, #mbt-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #mbt-menu {

    width: 560px;

    margin: 60px auto;

    border: 1px solid #000;

    background-color: #333;

    background-image: -moz-linear-gradient(#800000, #333);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#800000));

    background-image: -webkit-linear-gradient(#333, #800000);

    background-image: -o-linear-gradient(#800000, #999);

    background-image: -ms-linear-gradient(#333, #800000);

    background-image: linear-gradient(#800000, #333);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #mbt-menu:before,

    #mbt-menu:after {

    content: "";

    display: table;

    }

    #mbt-menu:after {

    clear: both;

    }

    #mbt-menu {

    zoom:1;

    }

    #mbt-menu li {

    float: right;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #mbt-menu a {

    float: right;

    padding: 12px 30px;

    color: #FFFF00;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #mbt-menu li:hover > a {

    color: #fff;

    }

    *html #mbt-menu li a:hover { /* IE6 only */

    color: #000;

    }

    #mbt-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#800000, #999);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#333, #800000);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #mbt-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #mbt-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #mbt-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #mbt-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #mbt-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #mbt-menu ul a:hover {

    background-color: #fff;

    background-image: -moz-linear-gradient(#800000, #000);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #mbt-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #mbt-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #mbt-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #mbt-menu ul li:first-child a:hover:after {

    border-bottom-color: #fff;

    }

    #mbt-menu ul ul li:first-child a:hover:after {

    border-right-color: #fff;

    border-bottom-color: transparent;

    }

    #mbt-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }

    </style>

    <ul id="mbt-menu">

    <li><a href="#">الرئيسية</a></li>

    <li>

    <a href="#">الاقسام</a>

    <ul>

    <li><a href="#">قائمة منسدلة</a></li>

    <li><a href="#">سحابة التسميات</a></li>

    <li><a href="#">اضافات التواصل الاجتماعي</a></li>

    <li><a href="#">خدمات RYDNET المجانية</a></li>

    </ul>

    </li>

    <li><a href="#">دورة بلوجر</a></li>

    <li><a href="#">عن الموقع</a></li>

    <li><a href="#">اتصل بنا</a></li>

    </ul>                    

طريقة تعديل القائمة المنسدلة :

* اللون الاخضر : عناوين الاقسام الافقية .
* اللون الاحمر :  عناوين الاقسام العمودية .
* اللون الازرق :  روابط الاقسام كل قسم له رابطه الخاص .
*اللون البرتقالي  (650) طول القائمة حتى تتوافق مع مدونتك

انتهينا من الاضافة........

مع تحيات حمزة رمزي.........

قائمة منسدلة-1   - جديد !

قائمة منسدلة-2   - جديد !

قائمة منسدلة-3   - جديد !

قائمة منسدلة-4   - جديد !

قائمة منسدلة-5    - جديد !

قائمة منسدلة-6    - جديد !

اقرء المزيد

قائمة منسدلة - 5

لقد قمت في السابق بتقديم قائمة منسدلة بأشكال متعددة و ألوان رائعة...اليوم أقدم لكم قائمة منسدلة جديدة جميلة جدا...

                 طريقة تركيب قائمة منسدلة :                       

1- من لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة html/javascript
2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)

<div class="menubar">
  <ul>
   <li><a href="#" >الرئيسية</a></li>
   <li><a href="#" id="current">اضافات بلوجر</a>
    <ul>
     <li><a href="#">قائمة منسدلة</a></li>
     <li><a href="#">التواصل الاجتماعي</a></li>
     <li><a href="#">سحابة التسميات</a></li>
     <li><a href="#">المزيد...</a></li>
      </ul>
    </li>
   <li><a href="/about.html">خدمات rydnet</a>
                <ul>
                <li><a href="#">فوتوشوب اون لاين</a></li>
                <li><a href="#">meta tag</a></li>
                <li><a href="#">code converter</a></li>
                </ul>
          </li>
   <li><a href="#">اتصل بنا</a></li>
  </ul>
 </div>
<style>
.menubar{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;}
.menubar ul{
 background-color: #ddd; 
 height:50px;
 list-style:none;
 margin:0;
 padding:0;}
 .menubar li{
  float:right;
  padding:0px;}
 .menubar li a{
  background-color: #ddd; 
  color:#000;
  display:block;
  font-weight:normal;
  line-height:50px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  font-family: arial;
  font-size: 17px;
  font-weight: bold;}
 .menubar li a:hover, .menubar ul li:hover a{
   background-color: #000;
   color:#FFFFFF;
   text-decoration:none;}
 .menubar li ul{
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:200px;
  z-index:200;}
 .menubar li:hover ul{
  display:block;}
 .menubar li li {
  background-color: #000;
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:200px;}
 .menubar li:hover li a{
  background:none;}
 .menubar li ul a{
  display:block;
  height:50px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:right;
  font-family: tahoma;
  font-size: 11px;
  font-weight: bold;
  border-bottom: 1px solid #252525;}
 .menubar li ul a:hover, .menubar li ul li:hover a{
   background-color: #FF0098;
   border:0px;
   color:#ffffff;
   text-decoration:none;}
</style>

                   طريقة تعديل القائمة :                    

* اللون الاخضر : عناوين الاقسام الافقية .
* اللون الاحمر :  عناوين الاقسام العمودية .
* اللون الازرق :  روابط الاقسام كل قسم له رابطه الخاص .

انتهينا من الاضافة........

مع تحيات حمزة رمزي.........

أشكال أخرى لقائمة منسدلة بألوان رائعة جدا

قائمة منسدلة-1   - جديد !

قائمة منسدلة-2   - جديد !

قائمة منسدلة-3   - جديد !

قائمة منسدلة-4   - جديد !

   

اقرء المزيد

قائمة منسدلة - 3

اليكم شكل جديد من القائمة المنسدلة لاقسام وتبويبات المدونة.

تركيب الاضافة :
1- من لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة html/javascript
2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)

<div id="navigbar">

<ul id="navig">

<li>

<a href="http://rydnet.blogspot.com/search/label/%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=20">إضافات بلوجر</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/search/label/%D9%82%D8%A7%D8%A6%D9%85%D8%A9%20%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9?&max-results=20">قائمة منسدلة</a>

<ul>

<li><a href="http://rydnet.blogspot.com/2013/10/Drop-down-list3.html">قائمة منسدلة -1</a></li>

<li><a href="http://rydnet.blogspot.com/2013/08/Drop-down-list2.html">قائمة منسدلة -2</a></li>

<li><a href="http://rydnet.blogspot.com/2013/08/Drop-down-list1.html">قائمة منسدلة -3</a></li>

</ul>

</li>

<li>

<a href="http://rydnet.blogspot.com/2013/05/Determine-the-price-of-a-blog.html">ثمن مدونتك</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/2013/03/html.html">مولد كود الألوان</a>

</li>

<li>

<a href="http://adsense-converter-code.blogspot.com/">htmlمحول اكواد</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/2010/08/Map-Blog-of-rydnet.html">فهرس المدونة</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/search/label/%D9%86%D8%B4%D8%B1%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9?&max-results=20">نشر المواقع</a>

<ul>

<li><a href="http://rydnet.blogspot.com/2013/04/Site-reveals-you-missed-the-robots.txt-file-to-your-site.html">موقع يكشف لك أخطاء ملف robots.txt لموقعك</a></li>

<li><a href="http://rydnet.blogspot.com/2013/04/Add-sites-to-search-engines.html">اضافة موقعك في محركات البحث (جوجل و غيره) </a></li>

<li><a href="http://rydnet.blogspot.com/2013/06/alexa-google_14.html">مواقع لتبادل الزيارات لتحسين ترتيب موقعك في alexa و google</a></li>

</ul>

</li>

</ul>

</div>

3- احفظ الاداة .
4- من لوحة التحكم   >>>   قالب   >>>   تحرير html

5- ابحث بواسطة   ctrl+f  عن  :       

 <b:skin><![CDATA[/*

6- انسخ الكود التالي بعده مباشرة  :

 ==========================

navigation bar - Simple View

========================== */
#navigbar {
float: right;


: 100%px;

color: #FF

background: #990000;
widt
hF;
margin: 0px;
padding: 0;


px;

border:5px doub

position: relative;
height:3
0le #990000 ;
border-top-left-radius:0px;


m-right-radius:0px;

border-bo

border-top-right-radius:10px;
border-bott
ottom-left-radius:10px;
}
#navig {
margin: 0;
padding: 0;
}
#navig ul {

t-style: none
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#navig li {
li
s;
margin: 0;
padding: 0;
height:30px;
}


a:visited {

color: #FFF;

display: block;

font:normal

#navig li a, #navig li a:link, #navig li
  10px   Droid Arabic Kufi, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;


9999;

display: block;

text-decoration: none;
}
#navig li a:hover, #navig li a:active {
background: #C
Ctext-decoration: none;
text-align:center;
margin: 0;
padding: 9px 12px 10px 12px;


nsition-duration:all .6s ease-in-out;

t

-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-tr
aransition:all .3s ease-in-out;
border:5px double #990000 ;
border-top-left-radius:0px;
border-top-right-radius:10px;


 {

position: absolute;

left: 10

border-bottom-right-radius:0px;
border-bottom-left-radius:10px;
}
#navig li {
float: right;
padding: 0;
}
#navig li u
l00px;
height: auto;
width: 160px;
margin: 0;
padding: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;


: -25px 0 0 161px;
}

avig li:hover ul ul,
#
n
-o-transition-duration:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
#navig li ul a {
width: 140px;
}
#navig li ul ul {
margi
n #navig li:hover ul ul ul, #navig li.sfhover ul ul, #navig li.sfhover ul ul ul {
left: -999em;
}


li li.sfhover ul, #navig li li li.sfhover ul {
left: auto;
}

r, #navig li.sfhover {
position: sta
#navig li:hov
etic;
}

i li a, #navig li 
#navig 
l
#navig li:hover ul, #navig li li:hover ul, #navig li li li:hover ul, #navig li.sfhover ul, #navig
 li a:link, #navig li li a:visited {
background: #ffffff;
width: 120px;
color: #000000;
display: block;
font:normal 10px Droid Arabic Kufi, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
border:5px double #990000 ;


x 12px 10px 12px;

text-deco

border-top-left-radius:0px;
border-top-right-radius:10px;
border-bottom-right-radius:0px;
border-bottom-left-radius:10px;;
}
#navig li li a:hover, #navig li li a:active {
background: #787878;
color: #FFF;
display: block;
margin: 0;
padding: 9
pration: none;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-transition-duration:all .6s ease-in-out;
transition:all .6s ease-in-out;
}


/*

7- احفظ القالب  .
ملاحظة :  قم بتعديل اقسام وعناوين القائمة و الروابط بما يتناسب مع مدونتك.
انتهت الاضافة.

انواع اخرى من القائمة المنسدلة

قائمة منسدلة  -1-

قائمة منسدلة  -2-

قائمة منسدلة  -3-

اقرء المزيد