لخبراء الـ DOM او الـ JS او ايا كان ... المساعدة

[dewan159]

السلام عليكم ..
التعديل على تطبيق بلغة ليست لديك الخبرة الكافية بها شئ صعب جدا ...
قمت بكتابة كود jQuery يقوم بعمل Drop down Menu ... بشكل بسيط جدا .
المشكلة التى واجهتنى .. كيف اخفى القائمة او بشكل عام اى عنصر معينم عند الضغط على اى جزء اخر من الملف ....
اقصد : انا الان Mouse Over على عنصر معين . اريد ان يقوم بـ Hide هذا العنصر عند الـ Mouse out ... .. الكود بسيط ولكن إذا كان داخل هذا العنصر عنصر اخر ( a مثلا ) فعند المرور عليه يخفى العنصر الذى يحمله ( الأساسى ) !! وهذه بالطبع مشكلة ... فما اريده ان يخفى هذا العنصر عند الخروج عن حدوده ... مثال واضح على قائمة واجهة موقع Microsoft .

ارجو المساعدة .... كيف يكون الضغط على اى مكان بالصفحة .

<script type="text/javascript">
    $(document).ready(function(){
        $('.menu_content').hide();
        $('.menu_title').hover(function(){
            $('.menu_content').hide();
            $(this).next('.menu_content').show();
        });
    });
</script>
<div id="menu_holder">
    <a href="index.php" class="menu_title">Main</a>

    <div class="menu_content">

        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>

    </div>
    <a href="index.php" class="menu_title">Main</a>

    <div class="menu_content">

        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>
        <a href="ssssssssss">Sub</a>

    </div>
    </div>

[أباظة أفندى]

السلام عليكم

أخى dewan159 تفضل هذا الكود بعد التعديل يعمل كما طلبت

كود الـ HTML

<a href="index.php" class="menu_title">Main 1</a>| 
            <div class="menu_content">
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
            </div>
            <a href="index.php" class="menu_title">Main 2</a>
            <div class="menu_content">
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
                <a href="ssssssssss">Sub</a>
            </div>
        </div> 

كود الـ jquery

$('.menu_content').hide();
            $('a').hover(function(){
                $(this).next('div').show();
            }, function(){
                $(this).next('div').hide();
            } 

أتمنى يكون هذا ما كنت تريدة وأرجو أستخدامة فى ما يرضى الله

[dewan159]

مشكووووووووووووووور ولى عودة

[dewan159]

لم تعمل لان بمجرد التحرك عن الـ A يختفى الـ Next
مشكور ...

هل من حل اخر ؟!!

[أباظة أفندى]

أخى dewan159 تفضل هذا الكود قمت بعملة وتجربتة وهو يعمل كما تريد بس أكبر من السابق

كود الـ HTML

<ul id="menu">
            <li><a href="#">الرئيسة </a></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>
                <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>
                    <li><a href="#">طبيعة</a></li>
                </ul>
            </li>
            <li><a href="#">أتصل بنا </a></li>
        </ul> 

كود CSS

#menu {
                margin: 0;
                padding: 0;
                text-align: center;
            }
            
            #menu li {
                float: right;
                list-style: none;
                font: 18px Arial, Tahoma;
            }
            
            #menu li a {
                display: block;
                background: #20548E;
                padding: 5px 12px;
                text-decoration: none;
                border-right: 1px solid white;
                width: 70px;
                color: #EAFFED;
                white-space: nowrap
            }
            
            #menu li a:hover {
                background-color: #f97c00;
            }
            
            #menu li ul {
                margin: 0;
                padding: 0;
                position: absolute;
                display: none;
                border-top: 1px solid white
            }
            
            #menu li ul li {
                float: none;
                display: inline
            }
            
            #menu li ul li a {
                width: 70px;
                color: #fff;
                font-weight: bold;
                background-color: #004080;
            }
            
            #menu li ul li a:hover {
                background-color: #005ebb;
            } 

كود الـ jquery

$('#menu li').hover(function(){
                $('ul:first', this).slideDown('normal');
            }, function(){
                $('ul:first', this).slideUp('fast');
            }) 

أتمنى يكون هذا ما تريدة

[dewan159]

مشكووور

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