Hilfe bei mehr sub tabs.

erwieder · 24. Februar 2015

Hallo erstmal ich fange an mich mit css zu beschäftigen und bräuchte da mal hilfe.

Ich habe ein tutorial nachgebastelt ( --> Hier geht es zur Demo <-- )

Standart gibt es : Home | Menu 1| Menu 2 | Menu 3

wenn mann auf Menu 1 hält kommt ein submenü mit : submenu A - H

fertig. das geht auch.

den css. hab ich geändert das wenn mann auf submenu H geht ein weiteres submenu geöfnet wird mit inhalt 2A - 2D.

und wenn mann da auf 2 D geht, kommt ein weiteres submenu mit inhalt 3A - 3D

das geht auch. mach ich jetzt das wenn man auf 3D geht ein weiteres submenu sich öffnet, ist das submenu aber dauerhaft angezeigt. Das soll aber erst angezeigt werden, wenn mann über 3D hält. Wo liegt der Fehler ?

css

CSS

.menu, .menu ul { list-style: none;  padding: 0; margin: 0; }




.menu { height: 58px; }




.menu li {
	background: -moz-linear-gradient(#292929, #252525);
	background: -ms-linear-gradient(#292929, #252525);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
	background: -webkit-linear-gradient(#292929, #252525);
	background: -o-linear-gradient(#292929, #252525);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
	background: linear-gradient(#292929, #252525);
	border-bottom: 2px solid #181818;
	border-top: 2px solid #303030;
	min-width: 160px;
}
.menu > li {  display: block; float: left; position: relative; }




.menu > li:first-child { border-radius: 5px 0 0; }




.menu a {
	border-left: 3px solid rgba(0, 0, 0, 0);
	color: #808080;
	display: block;
	font-family: 'Lucida Console';
	font-size: 12px;
	line-height: 30px;
	padding: 0 25px;
	text-decoration: none;
	text-transform: uppercase;

}




.menu li:hover {
	background-color: #1c1c1c;
	background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
	background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
	background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
	background: -o-linear-gradient(#1c1c1c, #1b1b1b);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
	background: linear-gradient(#1c1c1c, #1b1b1b);
	border-bottom: 2px solid #222222;
	border-top: 2px solid #1B1B1B;
}
.menu li:hover > a { border-radius: 5px 0 0 0; border-left: 3px solid #C4302B; color: #C4302B; }




/* submenu styles */
.submenu {
	left: 0;
	max-height: 0;
	position: absolute;
	top: 100%;
	z-index: 0;
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-ms-perspective: 400px;
	-o-perspective: 400px;
	perspective: 400px;
}










ul.submenu li ul,
ul.submenu li:hover ul ul { 
	display: none; 
	left: 100%; 
	top: 0; 
}
ul.submenu li:hover ul,
ul.submenu ul li:hover ul { 
	display: block ; 
}













.submenu li {
	opacity: 0;
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transition: opacity .4s, -webkit-transform .5s;
	-moz-transition: opacity .4s, -moz-transform .5s;
	-ms-transition: opacity .4s, -ms-transform .5s;
	-o-transition: opacity .4s, -o-transform .5s;
	transition: opacity .4s, transform .5s;
	position:relative;
}
















.menu .submenu li:hover a {  border-left: 3px solid #454545; border-radius: 0;  color: #ffffff; }




.menu > li:hover .submenu, .menu > li:focus .submenu {  max-height: 2000px;  z-index: 10; }




.menu > li:hover .submenu li, .menu > li:focus .submenu li {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}




/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-ms-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
	-webkit-transition-delay: 50ms;
	-moz-transition-delay: 50ms;
	-ms-transition-delay: 50ms;
	-o-transition-delay: 50ms;
	transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
	-o-transition-delay: 100ms;
	transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-ms-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-ms-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
	-webkit-transition-delay: 350ms;
	-moz-transition-delay: 350ms;
	-ms-transition-delay: 350ms;
	-o-transition-delay: 350ms;
	transition-delay: 350ms;
}




.submenu li:nth-child(1) {
	-webkit-transition-delay: 350ms;
	-moz-transition-delay: 350ms;
	-ms-transition-delay: 350ms;
	-o-transition-delay: 350ms;
	transition-delay: 350ms;
}
.submenu li:nth-child(2) {
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
}
.submenu li:nth-child(3) {
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-ms-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;
}
.submenu li:nth-child(4) {
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	transition-delay: 200ms;
}
.submenu li:nth-child(5) {
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-ms-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	transition-delay: 150ms;
}
.submenu li:nth-child(6) {
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
	-o-transition-delay: 100ms;
	transition-delay: 100ms;
}
.submenu li:nth-child(7) {
	-webkit-transition-delay: 50ms;
	-moz-transition-delay: 50ms;
	-ms-transition-delay: 50ms;
	-o-transition-delay: 50ms;
	transition-delay: 50ms;
}
.submenu li:nth-child(8) {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-ms-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}

Alles anzeigen

flo96 · 24. Februar 2015

bei mir geht überhaupt kein submenu 2A -D auf

erwieder · 24. Februar 2015

bedenke das du bei lu auch als submenu machst (class=)

flo96 · 24. Februar 2015

??? ich mein deine demo seite... da kann ich das nicht finden

erwieder · 24. Februar 2015

gibt es ja auch nicht. da gibt es nur submenü a-h

das ist der original css

CSS

.menu, .menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu {
	height: 58px;
}
.menu li {
	background: -moz-linear-gradient(#292929, #252525);
	background: -ms-linear-gradient(#292929, #252525);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
	background: -webkit-linear-gradient(#292929, #252525);
	background: -o-linear-gradient(#292929, #252525);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
	background: linear-gradient(#292929, #252525);




	border-bottom: 2px solid #181818;
	border-top: 2px solid #303030;
	min-width: 160px;
}
.menu > li {
	display: block;
	float: left;
	position: relative;
}
.menu > li:first-child {
	border-radius: 5px 0 0;
}
.menu a {
	border-left: 3px solid rgba(0, 0, 0, 0);
	color: #808080;
	display: block;
	font-family: 'Lucida Console';
	font-size: 18px;
	line-height: 54px;
	padding: 0 25px;
	text-decoration: none;
	text-transform: uppercase;
}

Alles anzeigen

flo96 · 24. Februar 2015

Zitat von erwieder

Hallo erstmal ich fange an mich mit css zu beschäftigen und bräuchte da mal hilfe.

Ich habe ein tutorial nachgebastelt ( --> Hier geht es zur Demo <-- )

Standart gibt es : Home | Menu 1| Menu 2 | Menu 3

wenn mann auf Menu 1 hält kommt ein submenü mit : submenu A - H

fertig. das geht auch.

den css. hab ich geändert das wenn mann auf submenu H geht ein weiteres submenu geöfnet wird mit inhalt 2A - 2D.

und wenn mann da auf 2 D geht, kommt ein weiteres submenu mit inhalt 3A - 3D

das geht auch. mach ich jetzt das wenn man auf 3D geht ein weiteres submenu sich öffnet, ist das submenu aber dauerhaft angezeigt. Das soll aber erst angezeigt werden, wenn mann über 3D hält. Wo liegt der Fehler ?

Alles anzeigen

Entweder ist das ein Missverständnis oder was weis ich... nun ja wenn es auf bleibt... kannst du vllt mal dein html dazu geben?

Hilfe bei mehr sub tabs.

Jetzt mitmachen!

Teilen