CSS - انشاء قائمة (منيو) بدون جافاسكريبت : اتحاد المبرمجين العرب

بسم الله الرحمن الرحيم
هل انت نفسك تعمل منيو شكلها حلو زى المنيو بتاعة اتحاد المرمجين العرب؟ وهل انت شايف ان الجافاسكريبت بيبطئ تحميل المنيو وظهورها؟ فى الحالة دى ابشر عندنا الحل .

كل اللى هنستخدمه فى الدرس ده هيحليك تعمل منيو menu زى اللى موجودة فوق فى الموقع بتاعنا من تطويرى , وهى عبارة متكونة من :

صورة جرادينت شفافة
HTML
CSS

اولا :
نبدا بالصورة وهى موجودة على الرابط التالى :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICYNg3ragMjmdnAijKnU5Dw6QyKKeLpcZq0dmLn_LzRojkLQezDth6tQK3DSwcxGglqAPgHsBTj9rfVAqxHuYxIInhqenr0bDmj0ek_wi0BvlY9mDPINQ7h__uF3VK2F2dcLEmy-HnYE/s1600/gradient.png

ثانيا :
كود الـ HTML هيكون كالتالى :

<table cellpadding='2' cellspacing='0' class='tbl-menu'>
<tr>
<td class='td-menu-right'>
<ul id='nav'>
<li class='nodrop'>
<a href='http://www.aputeam.com/2012/07/blog-post_06.html'>هدفنا</a>
</li>
<li>
<a>الدورات التدريبية</a>
<ul>
<li> <a href='http://www.aputeam.com/2012/07/vbnet.html'>دورة الـ VB.NET</a></li>
<li> <a href='#'>دورة اختراق المواقع (قريبا)</a></li>
</ul>        
</li>
<li>
<a>المشاريع</a>
<ul>
<li> <a href='#'>MD5 Killer (قريبا)</a></li>
</ul>        
</li>  
</ul>
</td>
</tr>
</table>

ثالثا:
كود الـ CSS هيكون كالتالى :

.tbl-menu
{
    border: 1px solid #8C8C8C;
    margin: auto;
    width: 100%;
    text-align: right;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 43px;
    background: #494949 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICYNg3ragMjmdnAijKnU5Dw6QyKKeLpcZq0dmLn_LzRojkLQezDth6tQK3DSwcxGglqAPgHsBTj9rfVAqxHuYxIInhqenr0bDmj0ek_wi0BvlY9mDPINQ7h__uF3VK2F2dcLEmy-HnYE/s1600/gradient.png') repeat-x 0 -110px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    vertical-align: middle;
}

.td-menu-right
{
    width: 55%;
    vertical-align: middle;
}

#nav
{
    margin: 0px;
    padding-right: 9px;
    z-index: 1000;
    width: 100%;
    height: 32px;
    vertical-align: middle;
    
}
#nav li 
{
    float: right;
    position: relative;
    list-style: none;
    z-index: 1000;
}

/* main level link */
#nav a
{
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding: 8px 18px;
    margin: 0;
    /*
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
*/

    text-shadow: 0 1px 1px rgba(0,0,0, .3);
    font-size: 13px;
    font-family: Tahoma;
    z-index: 1000;
}
#nav a:hover {
    background: #000;
    color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a
{
    
    /*background: #ddd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICYNg3ragMjmdnAijKnU5Dw6QyKKeLpcZq0dmLn_LzRojkLQezDth6tQK3DSwcxGglqAPgHsBTj9rfVAqxHuYxIInhqenr0bDmj0ek_wi0BvlY9mDPINQ7h__uF3VK2F2dcLEmy-HnYE/s1600/gradient.png') repeat-x 0 -40px;*/
   
    color: #444;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
    z-index: 1000;
    
    background-color: #ddd;
     
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    
    /*
    border-top-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-top-color: #b4b4b4;
    border-right-color: #b4b4b4;
    border-left-color: #b4b4b4;
    border-left-width: 1px;
    border-left-style: solid;
    
*/
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    z-index: 1000;
}
#nav ul a:hover {
    background: #0078ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICYNg3ragMjmdnAijKnU5Dw6QyKKeLpcZq0dmLn_LzRojkLQezDth6tQK3DSwcxGglqAPgHsBTj9rfVAqxHuYxIInhqenr0bDmj0ek_wi0BvlY9mDPINQ7h__uF3VK2F2dcLEmy-HnYE/s1600/gradient.png') repeat-x 0 -100px !important;
    color: #fff !important;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;

    text-shadow: 0 1px 1px rgba(0,0,0, .1);
    z-index: 1000;
}

/* dropdown */
#nav li:hover > ul {
    display: block;
    z-index: 1000;
}

/* level 2 list */
#nav ul
{
    display: none;
    z-index: 1000;
    margin: 0;
    padding: 0;
    width: 215px;
    position: absolute; /*top: 35px;*/
    right: 0; /*background: #ddd url('../../images/style/gradient.png') repeat-x 0 0;*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-color: #b4b4b4;
    border-bottom-color: #b4b4b4;
    border-left-color: #b4b4b4;
    background-color: #ddd;
    color: #000000;
    font-size: 10.5px;
    font-family: Tahoma;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
}

#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
    z-index: 1000;
}

/* level 3+ list */
#nav ul ul {
    right: 178px;
    top: 3px;
    z-index: 1000;
}

/* rounded corners of first and last link
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;

    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;

    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
} */

/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
    width: 100%;
} 
html[xmlns] #nav {
    display: block;
}
 
* html #nav {
    height: 1%;
}

#nav li ul a.arrow_right_old
{
    background: url('images/img/drop3.png') no-repeat;
    background-position: left;
}

.arrow_right
{
    background: url('images/img/drop3.png') no-repeat;
    background-position: left;
}

#nav .nodrop:hover a
{
    
     border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#nav .goleft
{
 left: 0;
 right: auto;
 border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
    width: 300px; 
    max-height: 400px;
    overflow: auto;
}

#nav .margin
{
    margin-right: 10px;
}

اتحاد المبرمجين العرب

الجمعة، 6 يوليو 2012

CSS - انشاء قائمة (منيو) بدون جافاسكريبت

ليست هناك تعليقات:

إرسال تعليق

الاقسام

الارشيف

تابعونا على فيسبوك

الاشتراك فى القائمة البريدية