CSS Vertikalen Menü-Untermenü mit Blättern
Ich versuche, Vertikalen Menü, mit einem scroll-bar.
Das problem ist, dass die sub-Menü versteckt sich unter dem scroll-bar,
hier die Vorschau
Dies ist der code, den ich verwende
HTML-code
<div class="scrollbar" id="ex4">
<div class="content">
<div id="menuwrapper">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Product 1</a>
</li>
<li><a href="#">Sub Product 2</a>
</li>
<li><a href="#">Sub Product 3</a>
</li>
</ul>
</li>
<li><a href="#">Product 2</a>
</li>
<li><a href="#">Product 3</a>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Faqs</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">Where are we?</a>
</li>
</ul>
</li>
<li><a href="#">Help</a>
<li><a href="#">Home</a>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Product 1</a>
</li>
<li><a href="#">Sub Product 2</a>
</li>
<li><a href="#">Sub Product 3</a>
</li>
</ul>
</li>
<li><a href="#">Product 2</a>
</li>
<li><a href="#">Product 3</a>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Faqs</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">Where are we?</a>
</li>
</ul>
</li>
<li><a href="#">Help</a>
<li><a href="#">Home</a>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Product 1</a>
</li>
<li><a href="#">Sub Product 2</a>
</li>
<li><a href="#">Sub Product 3</a>
</li>
</ul>
</li>
<li><a href="#">Product 2</a>
</li>
<li><a href="#">Product 3</a>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Faqs</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">Where are we?</a>
</li>
</ul>
</li>
<li><a href="#">Help</a>
<li><a href="#">Home</a>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Product 1</a>
</li>
<li><a href="#">Sub Product 2</a>
</li>
<li><a href="#">Sub Product 3</a>
</li>
</ul>
</li>
<li><a href="#">Product 2</a>
</li>
<li><a href="#">Product 3</a>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Faqs</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">Where are we?</a>
</li>
</ul>
</li>
<li><a href="#">Help</a>
</ul>
</div>
</div>CSS-code
.scrollbar {
width: 250px;
height: 300px;
background-color: lightgray;
margin-top: 40px;
margin-left: 40px;
overflow-y: scroll;
float: left;
}
.content {
height: 450px;
}
#ex4::-webkit-scrollbar {
width: 8px;
background-color: #cccccc;
}
#ex4::-webkit-scrollbar-thumb {
background-color: #333333;
border-radius: 10px;
}
#ex4::-webkit-scrollbar-thumb:hover {
background-color: #999999;
border: 1px solid #333333;
}
#ex4::-webkit-scrollbar-thumb:active {
background-color: #666666;
border: 1px solid #333333;
}
#ex4::-webkit-scrollbar-track {
border: 1px gray solid;
border-radius: 10px;
-webkit-box-shadow: 0 0 2px gray inset;
}
#menuwrapper ul,
#menuwrapper ul li {
margin: 0;
padding: 0;
list-style: none;
}
#menuwrapper ul li {
background-color: #39255e;
border-bottom: solid 1px white;
width: 150px;
cursor: pointer;
}
#menuwrapper ul li:hover,
#menuwrapper ul li.iehover {
background-color: #6679e9;
position: relative;
}
#menuwrapper ul li a {
padding: 5px 15px;
color: #ffffff;
display: inline-block;
text-decoration: none;
}
#menuwrapper ul li ul {
position: absolute;
display: none;
}
#menuwrapper ul li:hover ul,
#menuwrapper ul li.iehover ul {
left: 150px;
top: 0px;
display: block;
}
#menuwrapper ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover {
background-color: #6679e9;
}
/* We style the color of level 2 links */
#menuwrapper ul li ul li a {
display: inline-block;
width: 120px;
}
#menuwrapper ul li:hover ul li ul,
#menuwrapper ul li.iehover ul li ul {
position: absolute;
display: none;
}
#menuwrapper ul li:hover ul li:hover ul,
#menuwrapper ul li.iehover ul li.iehover ul {
display: block;
left: 150px;
top: 0;
}
#menuwrapper ul li:hover ul li:hover ul li,
#menuwrapper ul li.iehover ul li.iehover ul li {
background: #39255e;
}
#menuwrapper ul li:hover ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover ul li.iehover {
background: #6679e9;
}
#menuwrapper ul li:hover ul li:hover ul li a,
#menuwrapper ul li.iehover ul li.iehover ul li a {
color: #ffffff;
}
.clear {
clear: both;
}Kann jemand das problem sein ?
Links zu jsfiddle.net begleitet werden müssen Sie durch code.
fiddle-link funktioniert nicht
jsfiddle.net/0Lxtmeyp/1
Es ist, weil Ihre
bitte ändern Sie nicht die Breite . wenn ich mehr sub-Menü, um das sub-Menü ist dann die Breite von 320 bis 420 will ich erhöhen , ich möchte nicht, dass diese Methode, die ich brauche, um überlauf des sub-Menüs im Inhaltsbereich
fiddle-link funktioniert nicht
jsfiddle.net/0Lxtmeyp/1
Es ist, weil Ihre
.scrollbar Breite klein ist. machen Sie es width: 320px;bitte ändern Sie nicht die Breite . wenn ich mehr sub-Menü, um das sub-Menü ist dann die Breite von 320 bis 420 will ich erhöhen , ich möchte nicht, dass diese Methode, die ich brauche, um überlauf des sub-Menüs im Inhaltsbereich
InformationsquelleAutor Raj | 2016-02-15
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist, dass Sie eine Höhe in Ihrem element, das erzeugt eine vertikale Bildlaufleiste, wenn Sie nicht brauchen, um eine Feste Höhe für den container, Sie könnten versuchen, dies zu ändern.
Beispiel ohne scrollen
http://jsfiddle.net/guilhermelucio/0Lxtmeyp/2/
Update:
Beispiel mit Blättern
Siehe ein Beispiel in JsFiddle: http://jsfiddle.net/guilhermelucio/0Lxtmeyp/3/
Hallo, ich aktualisierte den code, können Sie nun eine schriftrolle. Ich fand auch einen Artikel in der CSS-Tricks, wenn Sie Zweifel haben. Fiddle: jsfiddle.net/guilhermelucio/0Lxtmeyp/3 Artigo: css-tricks.com/popping-hidden-overflow
vielen Dank für Ihre update
InformationsquelleAutor Guilherme Lúcio
CSS Vertikales Menü mit scrolldown
http://allittechnologies.blogspot.in/2015/05/vertical-css-menu-for-aspnet.html
InformationsquelleAutor Sri