قائمة بتقنية css + قائمة منسدلة + jquery

بواسطة: محمد الحلبي

by Alhalabi

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<ul id="menu">
    <li><a href="#">الصفحة الرئيسية</a></li>
    <li><a href="#">المنتديات</a></li>
    <li class="unfix"><a href="#">اقسام الموقع</a>
        <ul>
            <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>
        </ul>
    </li>
    <li><a href="#">تطوير مواقع الويب</a></li>
    <li class="fix">
        <a href="#">دروس تعليمية</a>
        <ul>
            <li><a href="#">دروس سي اس اس</a></li>
            <li><a href="#">دروس سي اس اس</a></li>
            <li><a href="#">دروس سي اس اس</a></li>
            <li><a href="#">دروس لغات البرمجة</a>
                <ul>
                    <li><a href="#">لغة البرمجة php</a></li>
                    <li><a href="#">لغة البرمجة c#</a></li>
                    <li><a href="#">لغة البرمجة aspx</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">شاركنا بفكرة</a></li>
    <li><a href="#">اتصل بنا</a></li>
</ul>

CSS

/* CSS Document */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a:link{text-decoration:none;}
body{
    direction: rtl;
}

/* menu cover css code - كود الإطار الخارجي للقائمة */
#menu{
    height:50px;
    padding:0 20px;
    background-color: #0d5cb2;
    /* كود الظل الخاص بالقائمة */
    -moz-box-shadow:0px 0px 11px rgba(46, 46, 46, 0.47);
    -webkit-box-shadow:0px 0px 11px rgba(46, 46, 46, 0.47);
            box-shadow:0px 0px 11px rgba(46, 46, 46, 0.47);
}

/*
        menu ul css code - كود القائمة يبدأ من هنا 
*/
ul#menu > li{
    float:right;
    position:relative;
    border-left:1px solid #0b4d95;
}
ul#menu > li > a{
    display:block;
    padding:0 20px;
    font:bold 14px/50px Arial, Helvetica, sans-serif;
    color:#3f8ee4;
    text-decoration:none;
}
ul#menu > li > a:hover,
ul#menu > li:hover > a{
    color:#666666;
    background-color: #f3f3f3;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#f3f3f3), to(#d6d6d6));
    background-image:...

JavaScript

$(document).ready(function(){
    // لإظهار القائمة الفرعية قبل حل المشكلة
    $('ul#menu > li.unfix').hover(function(){
        $(this).find('>ul').slideDown();
    },function(){
        $(this).find('>ul').slideUp();
    });
    
    // لإظهار القائمة الفرعية الأولى بعد حل المشكلة
    $('ul#menu > li.fix').hover(function(){
        $(this).find('>ul').stop(true, true).slideDown();
    },function(){
        $(this).find('>ul').stop(true, true).slideUp();
    });
    
    // لإظهار القائمة الفرعية الثانية
    $('ul#menu > li.fix > ul > li').hover(function(){
        $(this).find('>ul').stop(true, true).slideDown();
    },function(){
        $(this).find('>ul').stop(true, true).slideUp();
    });
});