5قوائم افقية بتقنية الCSS تلائم كل الاذواق

5:29 ص غير معرف 0 Comments

5قوائم افقية بتقنية الCSS تلائم كل الاذواق

اهلا بكم زوار مدونتي في موضوع جديد لطالما احتاجه كل مدون وهو انشاء قوائم افقية بشكل جميل , لذا سنقوم اليوم بطرح مجموعة من القوائم الافقية المصنوعة بتقنية الCSS ويمكنك اختيار ما يناسبك .
5قوائم افقية بتقنية الCSS تلائم كل الاذواق

 قبل ان نبدا عليك ان تعرف نقتطين مهمتين لكل يسهل عليك الامر .. نحن سنضع لكل قائمة اكود الCSS الخاصة بكل قائمة وايضا اكود الHTML الخاصة بكل قائمة ومعاينة لكل قائمة لذا عليك ان تعرف اين يتم وضع اكواد الCSS داخل قالبك واين يتم وضع اكواد الHTML

 ◄لاضافة اكواد الCSS نبحث(CTRL+F) عن هذا الوسم ]]></b:skin> ونضع اكواد الCSS فوقه مباشرة(قبله)
◄اما اكواد الHTML اضافتها حسب رغبتك ولنفرض انك ستضعهم في اعلى مدونتك ◄قم بالبحث(CTRL+F) عن هذا الوسم <div id="header-wrapper"> وضع اكواد الHTML تحته مباشرة وهنا تختلف الاوسمة والاكواد من قالب لاخر لذا لا استطيع تحديد طريقة محددة لكل القوالب ولكن يمكنك وضع تعليق برابط مدونتك اسفل التدوينة وسأخبرك باين تضع الكود بالظبط
◄قم باستبدال  كلمة تعديل بالاسم الذي تريد ان يظهر في القائمة
◄قم باستبدال ال# بالرابط الذي تريد التوجه اليه عند الظغط على القائمة
الان سنقوم بطرح مجموعة من القوائم مرفقة بالاكواد والمعاينة لكل قائمة حتى تتمكن من اختيار افضلها بالنسبة لك
1- قائمة افقية بلون ذهبي يمكن تقسيمها داخليا للمعاينة من هنا
اكواد الCSS
 @charset "utf-8";

/* CSS Document */
body{
padding: 25px;
}
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;
width: 450px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4NK8XQLRW-9vwTQEHxGCHbnViATSDYLzrW2oWPPc9JhRxkm0VntJ1oEXwjAJyLdDAW8s96mTz-bFCRfhGHSNLkH4t-CeQKoa2gdX1osv-t3rtX3w4qs3WcY0LKudSH-3bUBVucgl3c3-X/s1600/nav-bg.jpg);

}

.float-right{

float: right;

}

.float-left{

float: left;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:right;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:right;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:right;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

right:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

right:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

right:100%;

}



/*^'^ Primary Items ^'^*/ 

#nav-container a{ 

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3u1umWjX0e-FPc1t2HWnKEidzYyTka1zBDWIP1xV_83WqJ8_I8JfAvPmRCyuxu2nov-gW8fsrA2xshtRioOHxAv8dmk9yJDRpWfz5veSQstkdfz-hCGqy_mFmvvaUxtnQm-a-CkDF_Z9/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}



#nav-container a:hover{

color: #6C3600;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3u1umWjX0e-FPc1t2HWnKEidzYyTka1zBDWIP1xV_83WqJ8_I8JfAvPmRCyuxu2nov-gW8fsrA2xshtRioOHxAv8dmk9yJDRpWfz5veSQstkdfz-hCGqy_mFmvvaUxtnQm-a-CkDF_Z9/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}



/*^'^ Secondary Items Container ^'^*/ 

#nav-container div, #nav-container ul{ 

padding:10px 4px 10px 4px;

margin:0px 0px 0px -100px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqK815MtFY-kHO63FOemZ_eOcx-UfxYsw8ZLWp81Fr_jg_QWe9g2XPFRlmT3K5eoNFF10Zo8A-mCYb57SD9aUwlOYm5zgQlLq1-40hs1IOVfpq_VJzOMJpXOaOJLI6LL5bsRTc5uennvgR/s1600/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}
/*^'^ Secondary Items ^'^*/ 

#nav-container div a, #nav-container ul a{ 

text-align: center;
padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN-vKPoA7cQdXAPgACd__mfOGCaCYceYmL6NXDPgLb0xFzIYGDTwu7D27_hsVwLkFiFbvGrocsJxLK0q8j3V2llxYeR2U0hEMbtpl0Vhyphenhyphen6S597Um2wVsekdciiEYRB8MMLeI43LSgBUpN/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}

/*^'^ Secondary Items Hover State ^'^*/ 

#nav-container div a:hover, #nav-container ul a:hover{ 

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN-vKPoA7cQdXAPgACd__mfOGCaCYceYmL6NXDPgLb0xFzIYGDTwu7D27_hsVwLkFiFbvGrocsJxLK0q8j3V2llxYeR2U0hEMbtpl0Vhyphenhyphen6S597Um2wVsekdciiEYRB8MMLeI43LSgBUpN/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}

/*^'^ Secondary Item Titles ^'^*/ 

#nav-container .item-secondary-title{
text-align: center;

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ_QoG6PvETz5YLXtOpyAe97lesn_Xt24e9tflnNKZFz1DlS8M9UfbgxJ5g96sdQhquQd8ifhn4Lj4y0D_2wgO_tUo31bkrnY04N3IUhxgUf-7n6ObweHg8GnaeWjPpJxSf5Yvc25zedQ8/s1600/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}

/*^'^ Horizontal Dividers ^'^*/ 

#nav-container .divider-horiz{ 

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}

/*^'^ Vertical Dividers ^'^*/ 

#nav-container .divider-vert{ 

border-right-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}
اكواد HTML
 <div class="nav-container-outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtjUXkd2SCODa6JdFII7MjF6co2cZjDn1l4SPEf4fYu7BmK9stLujOqMA0KPpVpAQEvWkdnfnC-KSM5OUQiRFBaF1Hc7P0NhR3w39NSMxymPLUvujOKMHKVQ5nXewoMcVcW8EekvNUC67/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsQKAS5ZzbMVEgOnd0cnGRCycFr_d5FQYHTgOqtw5ArPJJYA1Mp-8GzDCoQ_s_dMM6fSZtcW1q8d4ju3I3G2Hxfe1L1H8_9hA8LI720JEHorY0LHKiLTyCPsUz_nAIJOwQ1ik3Fz8DksTO/s1600/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">الرئيسية</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">تعديل</a>
<ul style="width:150px;">
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">تعديل</a>
<ul style="width:150px;">
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">تعديل</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >قائمة الروابط</span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >عنوان بعد الفاصل</span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">تعديل</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >قائمة الروابط</span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >عنوان بعد الفاصل</span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">تعديل</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >قائمة الروابط</span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >عنوان بعد الفاصل</span></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
<li class="clear"> </li>
</ul>
</div>
2- قائمة سوداء للمعاينة من هنا
اكواد الCSS
 .menu{

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;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:right;

padding:0px;

}

.menu li a{

background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8pvWrNdElptiponM3JOqgCjryXG8d1hV9cxZ9o9Ml3Kz0p3PcYt9Kj2ljPAxF7AYzJszPsZo46D8nLrfcPZlwOAbr_p_acSCfAOj7EMwVAjlEK5_7v5lO2iLB39L8tNzvnhYJfJwe_gO/s1600/seperator.gif") bottom left no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLP4IcPip0LlZhfaU3X98Y4HbeQLQIqxzKp5zkjLLHBvd_4ZCIF01d38SEN74GqLftqlk1_tW_pPnSABgqc2ri72yfBYh3VooeT_ZRNYfk8CmKbgntcH432gpXlB2k9kVUSHRdgKPiPy6/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin: 0px 0px 0px -145px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*right:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwa1XZ_LhhiRl1MXvO6V5qJ70GyNJa5AT09lsPT7XoMN0LR1XWKfr2gXJSS3zt4ji3UnbDVUj_FpZTBNtAVNs6qKmIUjKT7hVHKafFg3KrLgQ3q36ptI19-0Lf9qd_taAewVA6yrrRNNy/s1600/sub_sep.gif') bottom right no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:right;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://2.bp.blogspot.com/-CbQ-w2_Cy0I/U5db3HlwYQI/AAAAAAAAB3A/RXITf0r84Gk/s1600/hover_sub.gif') center right no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:right;

}
اكواد HTML
 <div class="menu">

<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="#">تعديل</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="#">تعديل</a></li>
</ul>
</div>

3-قائمة زرقاء للمعاينة من هنا
اكواد الCSS
 .wrapper1{

color: #44433f; 

font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWev4wzpMA9fdoLUy1_jWRWuFd20phKAg5pStj8EP0VsaK8c7i8FvghXzoqDyHNwIuVphaYt3Wk6rLxX5xgzo9Uc0CiCaXOt2_ecbQpYlnJkHlLxwUaID_aV-LbiVE7VGBIo42ffyPDKup/s1600/nav_bg.png) repeat-x;

float: right;

}

.nev-wrapper {

clear: both;

float: right;

}

.nav-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-guj22k2lZ0931Rweln8FGRai2p4C_avgJmbOBSj0pD8M0MFT1W03v9-8fhEqPq-22aDbgfoMU16XLpFECjoHI7ucnARBJlqK5n7o_THdlmOhY1hENh74NKhFSNToW5C9XwpfGbdLC5FW/s1600/nav_right.png) no-repeat top right;

float: right;

width: 11px;

height: 41px;

}

.nav-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitD8P58PGb8xEhJLNnXDcBAWnoDx8GF3XZiuEd5OveZcjFPAcCYq2hEBiXJeKFV30gyskfON5YVmPJit-fjDDYFXsMOnX32VICu6zKG_VhXmELQp8Ie-05mxMZ5KC-AD-kYul_4f7FDlWv/s1600/nav_left.png) no-repeat top left;

float: right;

width: 11px;

height: 41px;

}

.nav ul {

/*width: 648px;*/

height: 38px;

float: right;

margin: 0;

padding-top: 3px;

list-style: none;

font-size: 15px;

}

.nav li {

float: right;

padding: 0 7px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWd8LqBXueOAMyzYwoIjuImPnZ9A7IZ04-0QemwlJrxwQTvJfo8HCq99hwFr5xNJa_c9GoPjFzrLFl4V_ypxGtITSy9itWR63sanjLuS9I73A6V_l5Xnbl6AENM5I24-Mb4DP4Nyt5Bmyu/s1600/split.png) no-repeat left center;

position: relative;

z-index: 1;

}

.nav li.last {

background:none;

}

.nav li:hover {

z-index:2;

}

.nav li a {

display: block;
text-align: right;
line-height: 38px;

overflow: hidden;

float: right;

}

a .menu-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5_Uo4Mm2TW19RfqcqkPshgmcQLcOxODscaYOvOIuktK2mOnwTf67X9VmP_Fvm1Rs6rth7wSZfwWfj-R9WFYBXr7DlWDCUv_CFVzcMcwMctBlNAVSHnJlvSbmnT-4qSP8RQGfNIrCB-_-I/s1600/menu_right.gif) no-repeat right top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: right;

}

a .menu-mid {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEeQfo98iFEbb70t-aXF6wDBUAeTg4HnG6PQ7I3QDvK0h7kO-5TF51jJZMcWN5IOX5isIKN2BumNFqwRCISqyJCxx25_D29J6YEkREgw1tJDENvzTCw2jA62afzmaLFkSk1HqfQfw6VR0l/s1600/menu_mid.gif) repeat-x top right;

height: 32px;

line-height: 35px;

display: block;

float: right;

}

a .menu-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimc6P-CJswKUiSpkJLCK0IXI_EDu91JSLqfrwcbn-COsfsaxW1pNtct1cRdwMFI-SY5enlJhh1OzBICim6kxkrRvkJs8EhVuG7uYiuarC_JgwKQ3cuyGUhrw7RmEhyphenhyphenkLa3qJt-uCABOIEG/s1600/menu_left.gif) no-repeat top right;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: right;

}

.nav li a:hover .menu-right,

.nav li.active a .menu-right,

.nav li:hover a .menu-right,

.nav li a:hover .menu-mid,

.nav li.active a .menu-mid,

.nav li:hover a .menu-mid,

.nav li a:hover .menu-left,

.nav li.active a .menu-left,

.nav li:hover a .menu-left {

background-position: 0 -37px;

line-height: 35px;

}

.nav li a:hover,

.nav li.active a,

.nav li.hover a,

.nav li:hover a {

color: #09548B;

}

.nav li:hover .sub,

.nav li.hover .sub {

display:block;

}

.nav li .sub {

display: none;

position: absolute;

top: 27px;

right: 6px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_GTwD6qVKgHHOJ5pZfGm6l28xgKB6QuDVLFyPGzlxianA-ammlhMbdEo0t6eNldsdiQsdm1PKJhKvOAx9gvqSbySRB89g6-BoXE8hR_2swMSvkqltYxex4DI5m12OZd4E986aau1CR2l/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyXJtvcRQOpGhNJC6gB4kLhdJ0HiFjSQR6DIw7stOca4Dm_4NkjG7KpUKtJnTc8YIUxIwV_M2axGa8CaK1XC-AgKsH64s7hMDf46wRe3TynEopzA3ury56_PFNKI5QBThyphenhyphenXXoE9Vw0TXRk/s1600/submenu_bg.png) repeat-y;

width: 162px;

height: auto;

margin: 0;

padding: 0 12px 10px;

list-style: none;

font-size: 14px;

}



.nav li:hover li,

.nav li.active li {

width: 100%;

padding: 1px 0 2px;

border-bottom: 1px #C1D9F0 dashed;

background: none !important;

}

.nav li:hover li a,

.nav li.active li a {

color: #09548B;

background: none !important;

line-height: normal;

width: 156px;

padding: 8px 3px 3px;

text-indent: 1px;

}

.nav li:hover li a:hover,

.nav li.active li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/*IE*/

.nav li li a:hover,

.nav li li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/**/

.nav .btm-bg {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3YMoW0A5SF6u2IO7p2ZY1Cghf5x1uzqrcAtwAgwVZ6ObAohBDu9vnHSr0zgum8Az04vi_8SqMLl9nkGDCYKe3tTaqm2vcn9hyphenhyphenv3CJkDmpO5QHvCBW9ZMEfwnHb5Qasw5uLigwlylCTlVA/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixNBvIZMnk51KnnnVpZ8hTERj1Iam2FQjAoi_uy4AhIFahE8Mi1xVoSa9VqW9ZvPUbZgpVoogQuSCelVju9FsBQfGt6t9LlfNtuZ5BJktKuOi77M86uRfASBD3LKLaXK9Gi9_z8DRJ5-8o/s1600/content_bg.png) repeat-y;

float: right;

padding: 10px 20px;

}

.content h1 {

color: #333;

font-weight: 400;

text-transform: uppercase;

font-size: 18px;

border-bottom: 1px dashed #C1D9F0;

}

.content h2 {

font-weight: 400;

text-transform: uppercase;

font-size: 14px;

padding-right: 10px;

margin-bottom: -5px;

}

.content p {

padding: 0 15px;

text-align: justify; 

}

.content-bottom {

width: 710px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRjHU6eLSrfu5dGMGcUDD8WWVUVJehR9r3U3pjS0-4RmKhQ3XsvLIQTdE6JTVjTkZ2aTr-hlpOnEjgDTwFO8lG2kVXOANTZgEEw03nZgLp9Wwj7u8X_C92QLs2hIrLnytfFYHmlhW3UK1m/s1600/content_bottom.png) no-repeat;

height: 13px;

float: right;

}
اكواد HTML
 <div class="wrapper1">

<div class="wrapper">


<div class="nav-left">
</div>
<div class="nav">

<ul id="navigation">
<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">الرئيسية</span>

<span class="menu-right"></span>

</a>

</li>
<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">تعديل</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
<div class="btm-bg">
</div>
</div>
</li>
<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">تعديل</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
<div class="btm-bg">
</div>
</div>
</li>
<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">تعديل</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
<div class="btm-bg">
</div>
</div>
</li>
<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">تعديل</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
<div class="btm-bg">
</div>
</div>
</li>
<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">تعديل</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>
<li><a href="#">تعديل</a></li>
</ul>
<div class="btm-bg">
</div>
</div>
</li>
<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">تعديل</span>

<span class="menu-right"></span>

</a>

</li>
</ul>
</div>
<div class="nav-right">
</div>
</div>

4-قائمة برتقالبة مبومة للمعاينة من هنا
اكواد الCSS
 .menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpbLmSh-zZNA8uOv8ptAdG7ZQQPHTF2S6jG4yzWTES6FmjIWF6DzzZoBj_o-dmNVp7V8Ll1goizGipnfqKzNh8RRx9D90MwemVBB5XDMg-CPIBOehNG3Olnoo24vSQzg4eiZRJ6o_3HoR4/s1600/menu-bg.gif) top right repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:right;

padding:0px 8px 0px 8px;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-right:2px solid #f68618;

border-left:2px solid #f68618;

border-bottom:2px solid #f68618;
margin: 0px 0px 0px -145px;
display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*right:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

padding:0px;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:right;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:right;

} 

.menu #current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVep3k9otA1O8FizvJYDVssQ37BSxn8W_9LO7gwVZ6MiqXlTTX7_2kE6jXOFo4tPsS34sQ7V5ZuGZE28ZEw20Ap-gJMoIxeYblWiyxBzXHVCNFubQXP1HOT0_6fxt_MlAexDfMr3FZye5_/s1600/current-bg.gif) top right repeat-x;

color:#ffffff;

}
اكواد HTML
     <div class="menu">

<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="#">تعديل</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="#">تعديل</a></li>
</ul>
</div>

5-قائمة حمراء متعددة المستويات للمعاينة من هنا
اكواد الCSS
 div#container
{ width:740px; position:absolute; right:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:left; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ background: #b9121b;margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:right; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-right:1px solid #ffffff; border-left:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; right:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:right; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:right; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:right; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; right:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-right:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; right:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; right:132px; font-size:12pt; color:#ffffff; }
اكواد HTML
 <ul id="navigation-1">
<li><a href="#" title="Home">الرئيسية</a></li>
<li><a href="#" title="تعديل">تعديل</a>

<ul class="navigation-2">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل <span>«</span></a>

<ul class="navigation-3">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل <span>«</span></a>

<ul class="navigation-3">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="تعديل">تعديل</a>

<ul class="navigation-2">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
<li><a href="#" title="تعديل">تعديل</a>

<ul class="navigation-2">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
<li><a href="#" title="تعديل">تعديل</a>

<ul class="navigation-2">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل <span>«</span></a>

<ul class="navigation-3">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
</ul>
</li>
</ul>
اتمنى ان يكون الشرح بسيط وسهل التطبيق 
المصدر http://bdlab.blogspot.com/2011/01/17-drop-down-menu-widget-in-blogger.html
التسميات:
مواضيع ذات صلة

غير معرف



محول الأكوادالابتسامات


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