2015-05-12 20 views
6

folgende einfache Menü Markup Betrachten (automatisch generiert, und ich habe nicht viel Kontrolle über sie):CSS Überlauf versteckt und absolute Position

.menu { 
 
    width: 500px; 
 
    height: 20px; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* overflow: hidden ... problem */ 
 
} 
 
li { 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 30px; 
 
} 
 
ul li .submenu { 
 
    position: absolute; 
 
    left: 0; 
 
    display: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    width: 100px; 
 
} 
 
ul li:hover .submenu { 
 
    display: block; 
 
}
<ul class="menu"> 
 
    <li>Lorem ipsum</li> 
 
    <li>Submenu 
 
    <ul class="submenu"> 
 
     <li>Sub item 1</li> 
 
     <li>Sub item 2</li> 
 
    </ul> 
 
    </li> 
 
    <li>consectetur</li> 
 
    <li>adipiscing elit</li> 
 
    <li>Aliquam elit nisi</li> 
 
    <li>pharetra quis</li> 
 
    <li>nulla eget</li> 
 
</ul>

In dem obigen Code, wird das Menü hat eine feste Breite, aber es hat mehr Elemente, als in diese Breite passen, so dass der Rest der Elemente in der zweiten Zeile angezeigt wird. Ich möchte nur die Elemente anzeigen, die in die erste Zeile passen und den Rest ausblenden möchten.

Zu diesem Zweck möchte ich die Höhe für das Menü angeben. Ich bin mit diesem CSS für das Menü:

.menu { 
    width: 500px; 
    height: 20px; 
    overflow: hidden; /* problem */ 
} 

Problem ist, dass die oben CSS versteckt die .submenu Einzelteile auch. Bitte sehen Sie sich die Demo an, um das Problem zu verstehen.

enter image description here

Demo:http://jsfiddle.net/Lgyg2a4r/

+0

Warum wenden Sie kein Styling auf Ihr Untermenü an, damit es mehr wie ein Dropdown-Menü aussieht? Hintergrund, Rahmen, Schlagschatten – Andrew

+0

Wie kommt der Benutzer jemals zu den Elementen, die in der zweiten Zeile angezeigt werden? –

+0

Haben Sie die Möglichkeit, allen Elementen in der zweiten Zeile eine Klasse hinzuzufügen? – MCMXCII

Antwort

1

Für den ersten Teil Ihres Problems könnten Sie white-space: nowrap auf dem Menü und display: inline-block auf seinen unmittelbaren Kindern verwenden. Dies zwingt alle Menüpunkte in einer Zeile und sie reichen über den rechten Rand des Fensters hinaus.

Dies wird jedoch eine horizontale Bildlaufleiste erzwingen. Abhängig von Ihrer Situation können Sie overflow-x: hidden auf dem Element hinzufügen, das das Menü enthält. Dieses Element muss anderen Inhalt haben, damit es größer ist als das höchste Untermenü.

#wrapper { 
 
    overflow-x: hidden; 
 
    min-height: 400px; 
 
} 
 
.menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    white-space: nowrap; 
 
    background-color: palevioletred; 
 
} 
 
.menu > li { 
 
    display: inline-block; 
 
    margin-right: 30px; 
 
    position: relative; 
 
} 
 
.submenu { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: none; 
 
    background-color: paleturquoise; 
 
} 
 
.menu li:hover .submenu { 
 
    display: block; 
 
}
<div id="wrapper"> 
 
    <ul class="menu"> 
 
    <li>Lorem ipsum</li> 
 
    <li>Submenu 
 
     <ul class="submenu"> 
 
     <li>Sub item 1</li> 
 
     <li>Sub item 2</li> 
 
     </ul> 
 
    </li> 
 
    <li>consectetur</li> 
 
    <li>adipiscing elit</li> 
 
    <li>Aliquam elit nisi</li> 
 
    <li>pharetra quis</li> 
 
    <li>nulla eget</li> 
 
    </ul> 
 
</div>

0

Wenn Sie in der Lage sind, eine Klasse, um die Elemente hinzuzufügen, die Sie auf schweben (die zweite Zeile) ausblenden möchten, versuchen Sie so etwas wie dieses:

...... 
<li class="sec">Aliquam elit nisi</li> 
<li class="sec">pharetra quis</li> 
<li class="sec">nulla eget</li> 
...... 

CSS

ul li:hover ~ li.sc { 
    display: none; 
} 
+0

Entschuldigung, wenn ich nicht klar genug war, wird die Markierung automatisch generiert, und ich habe nicht viel Kontrolle darüber – user1355300

+0

http://jsfiddle.net/ddoticus/omax0szr/ – MCMXCII

+0

Ahhh, in welchem ​​Fall ist die gewünschte Lösung zu entferne die Elemente in der zweiten Zeile oder mache sie einfach so, dass sie das Untermenü nicht verdecken? – MCMXCII

1

Im Folgenden können Sie es ohne JQuery tun. Entfernen Sie position:relative von li. Und entfernen Sie left, top von submenu und verwenden Sie negative margin wird Trick machen.

.menu { 
 
    width: 500px; 
 
    height: 20px; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden /* problem */ 
 
} 
 

 
li { 
 
    float: left;  
 
    margin-right: 30px; 
 
} 
 

 
ul li .submenu { 
 
    position: absolute; 
 
    display: none; 
 
    list-style: none; 
 
    width: 100px; 
 
    margin-left: -40px; 
 
} 
 

 
ul li:hover .submenu { 
 
    display: block; 
 
}
<ul class="menu"> 
 
    <li>Lorem ipsum</li> 
 
    <li >Submenu 
 
     <ul class="submenu"> 
 
      <li>Sub item 1</li> 
 
      <li>Sub item 2</li> 
 
     </ul> 
 
    </li> 
 
    <li>consectetur</li> 
 
    <li>adipiscing elit</li> 
 
    <li>Aliquam elit nisi</li> 
 
    <li>pharetra quis</li> 
 
    <li>nulla eget</li> 
 
</ul>

prüft Fiddle Here.

Hinweis: nicht zuverlässig, aber guter Problem zu lösen.

+0

Beachten Sie, dass Sie den 'linken' Offset von' .submenu' entfernt haben, was wichtig ist, damit dies funktioniert. Ein paar Worte der Erklärung wären in Ordnung. Einziger Wermutstropfen sind Cross-Browser-Probleme. –

+0

Sie haben die relative Positionierung von den Hauptmenüpunkten entfernt. Autsch. –

+0

Ja, das tun – ketan

1

können Sie dies mit Hilfe von $(this).position(); jQuery erreichen

$('li').hover(function(){ 
     var li = $(this).position(); 
     $(this).children('ul').css({ 
      left: li.left, 
      top : li.top+20 
     }).fadeToggle(); 
}); 

und entfernen Sie die position relative von li

Working File

+0

, wenn Sie relative und linke Position entfernen: 0 Sie würden das gleiche ohne jquery erreichen –

+0

@Escobear ja, aber es kann Cross-Browser-Problem sein –

Verwandte Themen