Probleem jQuery navigatie menu

[Verwijderd]

Beste,

Ik ben bezig met een website voor iemand, waarin de navigatiebalk met HTML, CSS en jQuery geprogrammeerd is.

Ik zit met een <div id="navigator"> waarin een jQuery balk (menu) zit, waar een dropdown in aanwezig is.

Mijn probleem is nu, als ik mijn navigator div id groot genoeg maak in hoogte dan klapt die dropdown perfect uit. Maar als ik mijn "div id" verklein, zodat mijn content mooi aansluit op de navigatiebalk dan klapt die maar uit tot het einde van de "div id" van de navigatiebalk. Ik zou graag hebben dat dit menu openklapt over mijn content als dat mogelijk is, zonder dat de content naar beneden schuift als je die openklapt.

Is dit mogelijk en hoe begin ik hier aan. Moet ik enkel een aanpassing doen in men "div id" of in de code van de navigatiebalk?

Alvast bedankt

Peter

[Wiethoofd]

Misschien de relevante code hier posten of even op een JSfiddle oid kan helpen.

[OkkE]

Klinkt als een gevalletje #navigation{ overflow:hidden; }, die overflow er af en het zou moeten werken. (Eventueel je dropdown nog een position:absolute als die dat niet heeft.)

Zo niet, dan lijkt het me handig als je inderdaad even een testcase maakt met alleen de relevante code, waarin het probleem zichtbaar is.

[ Voor 14% gewijzigd door OkkE op 22-06-2012 10:39 ]

[Verwijderd]

Inderdaad, geen slecht idee. Maar had zoiets van misschien is het wel een klein iets die ik over het hoofd heb gezien, waardoor het niet bepaald nodig was om de code te posten

css van de navigatiebalk :

code:

        #navigator {
    width: 940px;
    float: left;
    padding-right: 30px;
    height: 130px;

    
    #nav {
    padding:0;
    list-style:none;
    float: right;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    }   
    
        
        #nav li {
    display:block;
    width:100px;
    position:relative;
    z-index:500;
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0px;
    background-color: #DBB308;
    float: left;
    overflow: visible;
        }
        
        
    #nav li a {
    display:block;
    font-weight:700;
    height:23px;
    text-decoration:none;
    color:#fff;
    text-align:center;
    color:#666;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 5px;
    font-family: Tahoma, Geneva, sans-serif;
        }

    #nav li a:hover {
    color:#FFFEFE;
        }
    
        
    #nav a.selected {
    color:#FFFEFE;
        }
    
        
    #nav ul {
    left:0;
    display:none;
    padding:0;
    list-style:none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
    position: absolute;
        }
        
    #nav ul li {
    width:100px;
    float:left;
        }
        
        
    #nav ul a {
    display:block;
    height:15px;
    color:#666;
    padding-top: 8px;
    padding-right: 5px;
    padding-bottom: 8px;
    padding-left: 5px;
        }
        
    #nav ul a:hover {
    text-decoration:underline;  
        }

        
    *html #nav ul {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
        }

de HTML

code:

<div id="navigator">
<ul id="nav">
    <li><a href="#">Promoties</a></li>
    <li><a href="#">Telenet</a></li>
    <li><a href="#">Producten</a>
    <ul>
        <li><a href="#">Computers</a></li>
        <li><a href="#">Accesoires</a></li>
        <li><a href="#">Randapp.</a></li>
    </ul>           
        <div class="clear"></div>
    </li>
    <li><a href="#">Media</a></li>
    <li><a href="#">Repair</a></li>
</ul>

<div class="clear"></div>


</div>

De jQuery

code:

$(document).ready(function () { 
    
    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(200);

        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(200);         
        }
    );
    
});

Bedankt!

[Wiethoofd]

Je zou sowieso overal waar je alle margins op 0 zet niet alle zijden hoeven neer te zetten, een enkele margin: 0; is genoeg.

Volgens mij is het trouwens een position: relative op de <li> waarin je een nieuwe <ul> voor een submenu nest, die weer de postion: absolute krijgt (dit heb je nu omgedraaid). (al zou een afbeelding met het gewenste resultaat mij weer helpen )

[Verwijderd]

Ik heb het probleem zelf kunnen oplossen, in mijn #navigator heb ik mijn overflow op visible geplaatst en nu doet hij het blijkbaar wel.

Toch bedankt voor de hulp