النتائج 1 إلى 6 من 6

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

  1. #1
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    450

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



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

    ارجو المساعدة .... كيف يكون الضغط على اى مكان بالصفحة .
    كود HTML:
    <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 ; 02-11-2009 الساعة 08:12 PM


  2. #2
    عضو نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    47


    السلام عليكم

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

    كود الـ HTML
    كود PHP:
    <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
    كود PHP:
    $('.menu_content').hide();
                $(
    'a').hover(function(){
                    $(
    this).next('div').show();
                }, function(){
                    $(
    this).next('div').hide();
                } 
    أتمنى يكون هذا ما كنت تريدة وأرجو أستخدامة فى ما يرضى الله





    __________________


  3. #3
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    450


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






  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    450


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

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






  5. #5
    عضو نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    47


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

    كود الـ HTML
    كود PHP:
    <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
    كود PHP:
    #menu {
                    
    margin0;
                    
    padding0;
                    
    text-aligncenter;
                }
                
                
    #menu li {
                    
    floatright;
                    list-
    stylenone;
                    
    font18px ArialTahoma;
                }
                
                
    #menu li a {
                    
    displayblock;
                    
    background#20548E;
                    
    padding5px 12px;
                    
    text-decorationnone;
                    
    border-right1px solid white;
                    
    width70px;
                    
    color#EAFFED;
                    
    white-spacenowrap
                
    }
                
                
    #menu li a:hover {
                    
    background-color#f97c00;
                
    }
                
                
    #menu li ul {
                    
    margin0;
                    
    padding0;
                    
    positionabsolute;
                    
    displaynone;
                    
    border-top1px solid white
                
    }
                
                
    #menu li ul li {
                    
    floatnone;
                    
    displayinline
                
    }
                
                
    #menu li ul li a {
                    
    width70px;
                    
    color#fff;
                    
    font-weightbold;
                    
    background-color#004080;
                
    }
                
                
    #menu li ul li a:hover {
                    
    background-color#005ebb;
                

    كود الـ jquery
    كود PHP:
    $('#menu li').hover(function(){
                    $(
    'ul:first'this).slideDown('normal');
                }, function(){
                    $(
    'ul:first'this).slideUp('fast');
                }) 
    أتمنى يكون هذا ما تريدة





    التعديل الأخير تم بواسطة أباظة أفندى ; 05-11-2009 الساعة 06:44 PM
    __________________


  6. #6
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    450


    مشكووور

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










ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا|شقق للايجار في الكويت | بيوت للبيع في الكويت | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض