إضافة قوائم مسندلة لمدونة بلوجر بأكثر من شكل جداب

تدوينة بعنوان :

إضافة قوائم مسندلة لمدونة بلوجر بأكثر من شكل جداب

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

الشرح

أولا هذه الإضافة سنضيفها من داخل القالب من كود Html لذلك قم بأخد نسخة احتياطية لقالبك تجنبا لأي أخطاء أتناء تركيب الإضافة ..

بعدها قم بتحرير قالبك ..

......

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

قبل أن تضيف أي كود عليك أن تعلم أن لكل قائمة من القوائم المقترحة أمامك كودين خاصين الكود الأول هو كود css والكود التاني هو كود Html 

الكود الأول عليك أن تضيفه فوق هذا الوسم مباشرتا ]]></b:skin> 

أما الكود التاني فيمكنك اختيار المكان الذي تريد أن تضيف فيه القائمة ولنفرض أنك تريد أن تضعها في أعلى مدونتك فعليك وضعه أسفل هذا الوسم مباشرتا <div id="header-wrapper">

طبعا تختلف الأوسمة والأكواد من قالب لآخر لدى إن واجهت مشكلة في تحديد مكان وضع الكود يمكنك وضع رابط مدونتك في التعاليق وأنا سأعاينها وأخبرك بالمكان الذي يجب عليك إضافة الكود له .

بعد إضافتك للأكواد قم بإستبدال ما يلي :

تعديل : بالتسمية التي تريدها الظهور على القائمة .

# : بالرابط الذي تريد أن يتوجه إليه من يضغط على التسمية .

والآن إليك مجموعة من قوائم جميلة مع المعاينة ..

قائمة أفقية دهبية مقسمة داخليا للمعاينة من هـــنـــا

كود 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/AVvXsEi4QTUggD9V3opO-MDqolszus2iUcYF5scc1pvUGQXqDGnsFF9PK5nS3HSDqejd068Rboobza57CWUGyiQhfXHFi5hgUUsW8G3mf0D2AtwK4J5dHifEgMzb76K737Jpe4V1AZC_MQRyL268/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/AVvXsEjOGIYToOHxvFaQXesVLOqavoxJcJoF0-bWbh8jGjBwdQw_Nzpdc2MzMn1rS3PcaD8ZSRsy4mgI5dhe1BTiiLnt2JeyBYLspmcmV0ca-FKYiLihyphenhyphenEzhhtrZNCtwHrHglLIE_-YjW39BS36p/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/AVvXsEjOGIYToOHxvFaQXesVLOqavoxJcJoF0-bWbh8jGjBwdQw_Nzpdc2MzMn1rS3PcaD8ZSRsy4mgI5dhe1BTiiLnt2JeyBYLspmcmV0ca-FKYiLihyphenhyphenEzhhtrZNCtwHrHglLIE_-YjW39BS36p/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/AVvXsEhQNyMIbV9zNRC6FTcH-BpsitNUsDrfRdQQGRf6TVirGbrK0QrLNJ8JRqHL19XTB9wbeir4p45SXglARhQW97LoC-pvK39pjCiUzibksftiPheykBYToH9SlFLR5P82pT2w47HWYF24ntaD/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/AVvXsEgpuR5I79ST-xOD9FnZXdFNH7DDjqaiKHW1q4mnHyJK7vsiByz70lJlXp0dcS-6Og1fpNLq2ZbOdC3autEtlsGfXhmPzCH7A2kP48YyanU1HkBh8vh6WqJ0PgHIKtOa4wSrrLGCvC1kuQaD/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/AVvXsEgpuR5I79ST-xOD9FnZXdFNH7DDjqaiKHW1q4mnHyJK7vsiByz70lJlXp0dcS-6Og1fpNLq2ZbOdC3autEtlsGfXhmPzCH7A2kP48YyanU1HkBh8vh6WqJ0PgHIKtOa4wSrrLGCvC1kuQaD/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/AVvXsEii1_-ynKhVjlekltUDE952R_Uq51ZIHBgm-kCPALFCiZm9d3U1cqgIsPZ49w_KxxAYIaDH1AKG7mYLjkagbUq5oM5dFY8cSPTfX-tnH_4EKhmghv6ivrAvKxCh724kzguuxCJmUz54oljB/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/AVvXsEgNEw70PO6jF408ijt6Nz6CknHVK69nFLhW378efLqDjUQ8VPFkhVTL02k_tll4OiRPNXRzXuG72JfhAStdgCRflI-g2abTk7ybMuZDokoCakdtnGAdIk__M4ncViObvh5xIBCtf-42_zFI/s1600/nav-bg-l.jpg" alt="" class="float-left" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86DsZjNryEfV-jCDCxX8qLzgJSQwZ9eJPK2h8J2e_QZvjIM1r1px5Lc6GGtnFN7rmClVyFncY0fqpJ0eVEF9ImsW-PCDPkFHmnuKlwVJUW9fPEsivXtAO-lgKB7FFgWjor7YC37swuCBp/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>

قائمة سوداي لمعاينة القائمة من هـــنـــا

كود 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/AVvXsEhaWRWsUD3WpsT4rxDyX4nWKH5-L1Fv6qDYMLEe8dbfGmvYbV9R0WWC0Ylu0WUHci9SuPcHqOmnMvI3AlnrfB6Go1AuBV4bB3oYEJwh85Wi8vVrEujowCtN6v_Apd3hAFcX1XIw5doPGd1I/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/AVvXsEhQhfQzKcAEVazWZnuFB4XMFlozSg-4QvR9iW8LbEjhukbkWDwOqMOILeyRidTQKwRQKL5-eeQah9dtSJJ9IG6cKp4j-Ln9URHpvhblSaNC98QZhOEl4xKSqmGlSaV1mKcStcWBmbo_d-zF/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/AVvXsEin5E59-hf4ep2Zk7M8Jh6q-x6wCHuKW3UtmWndm4PfrJkXA40EUXyT8bOo-THoiYu2lbUND1jYrh-fbP1G5EJYR_6UYJkpox4QNvolxgbR42O177UZuKS_LrzkWCrjQyKnGr1ogHoDV856/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>

قائمة زرقاء لمعاينة القائمة من هــــنـــا

كود 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/AVvXsEhp39NSyUx2rqRSkQbj4CXNkDgN4azVjYl7gHtulIUczvr1CceG8S_7bIeZo61L25hVJq9Gcb_bl0w0kTiUoiCIUWtmazFdkFvGeF1Dmx3m2JBm8UYtetFcaDEneSZ8fKQdlhqTtR1ZEN52/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/AVvXsEhERuFVzodK5xNh5YYDw917RIDnZxlM3h7OBf1GkqheW1YMnaseP-wNVHCkdhcpzrSfD4-l77GhH2ke2yCLiQ4reI4p76r83AssaITK0F99cuFo9LrdOQ95EZ3IgvvpRElfLBRd94G5DhTy/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/AVvXsEhYe8vlWcr-xlOts0u1_aXFEm0LlPTNhx3cw4mo1MpupRGcWdodu4ljtdkeJOAfBUiDr5XamKM3LExCZNMAK9Lf9RT_GiFT3ikvb-ph87ceDLvtpE1f520Oy2ocaLenskM6-EcuFJ9G-Bmx/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/AVvXsEgcwoPfeMKmeunKJ_sNN5vRC2Iq95PGTW_4p7I6T8KMQdYKU6FNP6l2MlttRLITM6qKiWUaN1GM8SNmWvXv3IFL3U60EeBdanpjMgnZO2osQkkTNNQqr8dlUY6d2SvYKEUIlrKOKS080T2p/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/AVvXsEiukjHlu-5PmixvH5KHG7qrW68qdwANHDnDSzeKhd4Gm0kNJLBLhhax-TyqjLeMpMvOff5qQlRumsbkcKhH3K5DOhUnwuGzKYHMXVVwLouVV_9bHeNrAWonDxczKG8lw9XJRXK_r8H0elUn/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/AVvXsEjtz2vTioUJz8wcF6h1QFbpWO0QuBdCiiZKt8Vh4G39e9_7TQswAgNap1wFqNtY1LmXwV_aXJY_X2Meb-kP4EdUSgnMFblljgsA6wHu_Z0wExhvqouMUxlP3rEIgAwz76lWgbCOHAqDvZhH/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/AVvXsEhh3yVoRtzJoYnlvSc63H-J7ohouLtXEy-HqgAmreed92Z9VqLuOf-YIwhpJRVUWv0rqakn2QJA5liyMvDvIsGp63fV7W0m727HVZIq6BhMv88uhCFrNsr86eE-MdfEQCrzenwSJ40hH93y/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/AVvXsEgLEfTqkf5ulMTTKEqI0FB6_cfr9BtWLAcGcdqfv3DGSgIFFkY8F9VSUjWQMUZAXiV7-e3wRigk7Kw-zIuM_4QvRQLT3M8LV1zDJqQTEmUlGOf5Y5AM62MSYx1_Fh_51oGBoXF4IcLe9Ekh/s1600/submenu_top.png) no-repeat; width: 186px; padding-top: 9px; } .nav li ul { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifAdIqkOah4l22xgqbxhHDpXCHfLCzo9JesVkRzw2tBad4K2fwuKlkq37ma3YmLls4f36Y91LcNQWl3oMusFw0XHRPrYpIuaKJvGcD4SWRYnNkINcyb7zXHAzKgor3oljV84s90ZdPLOzE/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/AVvXsEj6LYvZ9K6kqIroZuCsyGQtAJiTvE9FI_iKzs2-_ujpbn8EVv_zc_1AfDw2odc12QKqzD4uR69mxj2b6tUjYzwRF2St3v6iWJoaI9rRiC_4DNpFT84tEcF7eARC6KlQP1wugco0RKiA3eQP/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/AVvXsEjxMoGk1y25ElhMRhYxrmeOM0y3e5AIo0EQW0jSKx0ceZB8zMGQlSSOEgYnhr7A9pYUG8DNV_wMr9EjVymwlmZfX4djky-X6l9lTEmx2N8xpZipueazkPc-2RItiAwixEQ0tfcOi8v9dHX0/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/AVvXsEhWpdxwAJjMJ1siIjmfSThtoR5358iprbXXmLeuxeWeB2-bO2jd5apEJA_NKnbZ_l6J-7LqBN46EUQXqKpqAjuzwePq_QFf8We0c1gvXkk9iLY3nU0d57T1QyCD6rWUAYFgcMS65QwKNwa_/s1600/content_bottom.png) no-repeat; height: 13px; float: right; }

كود Html الخاص بالقائمة 

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

قائمة برتقالية لمعاينة القائمة من هـــنـــا

كود 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/AVvXsEjxUo3CtEExZDG8bplq5Vyme6sUWBebKJ59YH4lu3-XOjeymCQ9xd2JycdcaIprofPqGfAmIZpuNAuVU-0H1jDutlMEgGFXN5rlXOYO5UBsVVZCGMtb80eX7_jL7njYh5EyQ4gbbIVRfyvA/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/AVvXsEhzzz-sMrokEkisa8oZmPBy67iXBUHqSZtRCVMIhGPVOMBEZlt7vCsxH6bhYw0Yy0IvPVwbdy17bCaPx7qNWvXv98_vFYbFqp7LYpbDz5lzAIptd30-pjTM8jWu53W2Ccf6dlQFJQCbJlYP/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>

قائمة حمرا للمعاينة من هـــنـــا

كود 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>

لا تنسى ما قلناه في بداية الموضوع عن أماكن وضع الأكواد وإذا واجهتك أي مشكلة كيفما كانت فيمكنك وضع تعليق أسفل الموضوع في صندوق التعليقات  وأنا سأجيبك في أقرب وقت ممكن ..

إنتهى شرحي والحمد لله وأتمنى أن يكون وافيا ومستوفيا لفهمكم للموضوع المشروح ..

إدعمونا بمشاركة الموضوع

شاركها