[Css] : ظ‚ط§ط¦ظ…ط© ط±ظˆط§ط¨ط· ط¨ظ‡ط§ ظ‚ظˆط§ط¦ظ… ظ…ظ†ط³ط¯ظ„ط© ط¨طھظ‚ظ†ظٹط© Css ط§ظ„ط*ط¯ظٹط«ط© ..~


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

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

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

.. بدأنا ..

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

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

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

وضع أكواد الـHtml ..
رمز PHP:
<code style="white-space:nowrap"> <code> <!--برمجة سواليف كام www.swalifcam.com-->
<ul id="menu">

<li><a href="#">رابط رئيسي 1</a></li>
<li><a href="#">رابط رئيسي 2</a>
<ul>
<li><a href="#">رابط فرعي 1</a></li>
<li><a href="#">رابط فرعي 2</a></li>
<li><a href="#">رابط فرعي 3</a></li>
</ul>
</li>
<li><a href="#">رابط رئيسي 3</a></li>
<li><a href="#">رابط رئيسي 4</a></li>
</ul>
<!--برمجة سواليف كام www.swalifcam.com-->
</code> </code>


لزيادة عدد الروابط الرئيسية قم بتكرار التالي :
رمز PHP:
<code style="white-space:nowrap"> <code> <li><a href="#">رابط رئيسي 1</a></li>
</code> </code>





وإما لزيادة عدد الروابط الفرعية قم بتكرار التالي :
رمز PHP:
<code style="white-space:nowrap"> <code> <li><a href="#">رابط فرعي 1</a></li>
</code> </code>

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

رمز PHP:
<code style="white-space:nowrap"> <code> /*
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;
}
</code> </code>

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

بالتوفيق ..~










©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©