[Css] : قائمة روابط بها قوائم منسدلة بتقنية Css الحديثة ..~

http://www.dzbatna.com/images/icons/iconrote.gif [Css] : ظ‚ط§ط¦ظ…ط© ط±ظˆط§ط¨ط· ط¨ظ‡ط§ ظ‚ظˆط§ط¦ظ… ظ…ظ†ط³ط¯ظ„ط© ط¨طھظ‚ظ†ظٹط© Css ط§ظ„ط*ط¯ظٹط«ط© ..~

---

السلام عليكم ورحمة الله تعالى وبركاته

أقدم اليوم لكم [Css] : قائمة روابط بها قوائم منسدلة بتقنية Css الحديثة ..~

والتي بإذن الله تعالى تنال من إعجاب الجميع ..~

.. بدأنا ..

لرؤية المثال :
http://forum.swalifcam.com/1.html

والأن مع طريقة التركيب install :

إذهب إلى لوحة التحكم --> البحث في القوالب إختار الإستايل style المراد التعديل عليه --> وأبحث عن : header ..

وضع أكواد الـHtml ..
رمز PHP:


<ul id="menu">

<li><a href="#">رابط رئيسي 1a>li>
<li><a href="#">رابط رئيسي 2a>
<ul>
<li><a href="#">رابط فرعي 1a>li>
<li><a href="#">رابط فرعي 2a>li>
<li><a href="#">رابط فرعي 3a>li>
ul>
li>
<li><a href="#">رابط رئيسي 3a>li>
<li><a href="#">رابط رئيسي 4a>li>
ul>



لزيادة عدد الروابط الرئيسية قم بتكرار التالي :
رمز PHP:

<li><a href="#">رابط رئيسي 1a>li>


وإما لزيادة عدد الروابط الفرعية قم بتكرار التالي :
رمز PHP:

<li><a href="#">رابط فرعي 1a>li>


والأن مع خصائص الـcss للقائمة :

رمز PHP:

/*
Main Menu
*/
#menu, #menu ul li {
margin: 0;
padding: 0;
list-style: none;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
background-color: #555555;
}

#menu li {
margin: 0;
padding: 0;
float: right;
position: relative;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
}

#menu li a, #menu li a:visited {
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
padding: 5px 12px;
color: #fff;
background: #555;
display: block;
text-decoration: none;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
}

#menu li a:hover {
color: #fff;
background: #222;
padding: 5px 12px;
display: block;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
}
/*
Sub Menu
*/
#menu li ul {
width: 199px;
padding:0;
position: absolute;
right: 0;
display: none;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
}

#menu li:hover ul {
display: block;
}

#menu li li {
margin: 0;
padding: 0;
float: right;
width: 175px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
}

#menu li li a, #menu li li a:visited {
margin: 0;
padding: 5px 12px;
border-top: 1px solid #fff;
background: #666;
width: 175px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
}

#menu li li a:hover{
background: #222;
color: #eee;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-BOTTOMright: 5px;
-webkit-border-BOTTOM-right-radius: 5px;
}


المصدر : http://forum.swalifcam.com/showthread.php?t=300

بالتوفيق ..~

ألعاب الأندرويد مجانا و حصريا

https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©