Probleme mit CSS Menü

steeeeven · 13. November 2012

Hallo ich hab folgendes Problem und zwar:
Ich möchte auf meiner Homepage ein Menü das folgendermaßen aussieht:

Mein bisheriges menü ist in einer superfish.css datei mit folgendem code:

PHP:

#menu ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: auto;
                position: relative;  /* Das brauchen wir nur fü IE */
}

#menu ul li {
float: left;
}

#menu ul li a {
display: block;
padding: 5px 10px 5px 0px;
text-decoration: none;
background-color: #FF8400;
width: 150px;
}

#menu .menu li ul,
#menu .menu li ul ul,
#menu .menu li:hover ul ul,
#menu .menu li:hover ul ul ul {display: none;}

#menu .menu li a:focus ul,
#menu .menu li:hover ul,
#menu .menu li li:hover ul,
#menu .menu li li li:hover ul {display: block;}

#menu .menu li ul {position: absolute; margin: 0;}
#menu .menu li ul li {margin: 0; padding: 0;}
#menu .menu li ul a {padding: 5px 5px 5px 0px;}
#menu .menu li ul li ul li a {padding: 5px 5px 5px 0px; }
#menu li {position: relative;}
#menu ul ul ul {position: absolute; top: 1px; left: 100%;}

Ich habe jetzt aber auch einen code für das neue Menü gefunden, weis nur noch nicht, ob und wo ich das einfügen muss, kann mir da jemand helfen oder hat einen anderen Lösungsvorschlag, bin wirklich blutiger anfänger....

PHP:

#cssmenu{ height:37px; display:block; padding:0; margin: 0 auto;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#ff9812; background:-moz-linear-gradient(top, #ff9812 0%, #e17310 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9812), color-stop(100%,#e17310)); background:-webkit-linear-gradient(top, #ff9812 0%,#e17310 100%); background:-o-linear-gradient(top, #ff9812 0%,#e17310 100%); background:-ms-linear-gradient(top, #ff9812 0%,#e17310 100%); background:linear-gradient(top, #ff9812 0%,#e17310 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9812', endColorstr='#e17310',GradientType=0); } 
#cssmenu{border-color:#b05a0d;} 
#cssmenu > ul > li > a{border-right:1px solid #b05a0d; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#ffa32b;} 
#cssmenu > ul > li > a:hover{background:#e17310;}

Danke & Gruß
Steff

crazy_chicken · 13. November 2012

dich hinsetzen und selber mal probieren, googlen, finden, lesen, noch mal finden, dann noch mal lesen und noch mal proboeren bis es klappt.

Viel Spaß.

steeeeven · 13. November 2012

Danke für die uführliche antwort -.-
Wenn ich in google eine etwaige Antwort gefunden hätte, müsste ich mich ja jetzt nicht an dieses Forum wenden...
Müsste halt mal den ANsatz wissen, ob das überhaupt geht, sonst kann man gar nicht anfangen zu probieren ;-)
Danke
Steff

crazy_chicken · 13. November 2012

Ein Beispiel für dich habe ich schnell gabut, jetzt kannst du selber ein bisschen rummontieren.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- saved from url=(0024)http://speamy.cwsurf.de/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

.dieGanzeNavi{
    background-color:orange;
    width:480px;
}
.einzelneZelle{
    border-left:black;
    padding:10px;
    width:100px;
    float:left;
    cursor:pointer;
}

.einzelneZelle:hover{
    background-color:#333333;
}

#fotoZusatz{
    position:absolute;
    visibility:hidden;
    margin-left:-10px;
    background-color: #333333;
    margin-top:10px;
    width:200px;
    color:white;
}
.zusatzZelle{
    padding-left:10px;
    color:white;
    cursor:pointer;
}

.zusatzZelle:hover{
    background-color:#aaaaaa;
}

</style>
<style type="text/css"></style></head>
<body>
 
<div class="dieGanzeNavi">
                <div class="einzelneZelle">Home</div>
                <div class="einzelneZelle">Profil</div>
                <div class="einzelneZelle" onmouseover="document.getElementById('fotoZusatz').style.visibility='visible'" onmouseout="document.getElementById('fotoZusatz').style.visibility='hidden'">Fotos
                     <div id="fotoZusatz">
                              <div class="zusatzZelle">Winter</div>
                              <div class="zusatzZelle">Sommer</div>
                              <div class="zusatzZelle">Herbst</div>
                              <div class="zusatzZelle">Herbst-winter</div>
                               <div class="zusatzZelle">Was auch immer</div>
                                
                     </div>
                </div>
                <div class="einzelneZelle">Videos</div>
<div style="clear: both;"></div>

</div>

</body></html>

ist doch ungefähr so, wie du es wolltest oder?

Nugorra · 15. November 2012

Hi,

@crazy_chicken:
http://www.tutorials.de/smalltalk/390907-js-verbreitung.html

@steeeeven:
das CSS Menu, dass du gepostet hast, kommt mir seeeehr bekannt vor

und da wo es herrkommt gibts sogar ne Anleitung wie man das einbaut.

Hab dir aber mal Arbeit abgenommen da ich das hier noch im orginal habe(hab das für mich bisschen modifiziert ^^)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	</head>
		<style type="text/css">
			#cssmenu{
				height: 37px;
				display: block;
				padding: 0;
				margin:  0 auto;
				border: 1px solid;
				border-radius: 5px;
			} 
			#cssmenu > ul {
				list-style: inside none;
				padding: 0;
				margin: 0;
			} 
			#cssmenu > ul > li {
				list-style: inside none;
				padding: 0;
				margin: 0;
				float: left;
				display: block;
				position: relative;
			} 
			#cssmenu > ul > li > a{
				outline: none;
				display: block;
				position: relative;
				padding: 12px 20px;
				font: bold 13px/100% Arial, Helvetica, sans-serif;
				text-align: center;
				text-decoration: none;
				text-shadow: 1px 1px 0 rgba(0,0,0, 0.4);
			} 
			#cssmenu > ul > li:first-child > a{
				border-radius: 5px 0 0 5px;
			} 
			#cssmenu > ul > li > a:after{
				content: '';
				position: absolute;
				border-right: 1px solid;
				top: -1px;
				bottom: -1px;
				right: -2px;
				z-index: 99;
			} 
			#cssmenu ul li.has-sub:hover > a:after{
				top: 0;
				bottom: 0;
			} 
			#cssmenu > ul > li.has-sub > a:before{
				content: '';
				position: absolute;
				top: 18px;
				right: 6px;
				border: 5px solid transparent;
				border-top: 5px solid #fff;
			} 
			#cssmenu > ul > li.has-sub:hover > a:before{
				top: 19px;
			} 
			#cssmenu ul li.has-sub:hover > a{
				background: #3f3f3f;
				border-color: #3f3f3f;
				padding-bottom: 13px;
				padding-top: 13px;
				top: -1px;
				z-index: 999;
			} 
			#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{
				display: block;
			} 
			#cssmenu ul li.has-sub > a:hover{
				background: #3f3f3f;
				border-color: #3f3f3f;
			} 
			#cssmenu ul li > ul, #cssmenu ul li > div{
				display: none;
				width: auto;
				position: absolute;
				top: 38px;
				padding: 10px 0;
				background: #3f3f3f;
				border-radius: 0 0 5px 5px;
				z-index: 999;
			} 
			#cssmenu ul li > ul{
				width: 200px;
			} 
			#cssmenu ul li > ul li{
				display: block;
				list-style: inside none;
				padding: 0;
				margin: 0;
				position: relative;
			} 
			#cssmenu ul li > ul li a{
				outline: none;
				display: block;
				position: relative;
				margin: 0;
				padding: 8px 20px;
				font: 10pt Arial, Helvetica, sans-serif;
				color: #fff;
				text-decoration: none;
				text-shadow: 1px 1px 0 rgba(0,0,0, 0.5);
			} 		
			#cssmenu, #cssmenu > ul > li > ul > li a:hover{
				background: #ff9812;
				background: -moz-linear-gradient(top, #ff9812 0%, #e17310 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9812), color-stop(100%,#e17310));
				background: -webkit-linear-gradient(top, #ff9812 0%,#e17310 100%);
				background: -o-linear-gradient(top, #ff9812 0%,#e17310 100%);
				background: -ms-linear-gradient(top, #ff9812 0%,#e17310 100%);
				background: linear-gradient(top, #ff9812 0%,#e17310 100%);
				filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9812', endColorstr='#e17310',GradientType=0);
			} 
			#cssmenu{
				border-color: #b05a0d;
			} 
			#cssmenu > ul > li > a{
				border-right: 1px solid #b05a0d;
				color: #fff;
			} 
			#cssmenu > ul > li > a:after{
				border-color: #ffa32b;
			} 
			#cssmenu > ul > li > a:hover{
				background: #e17310;
			}  
		</style>
	</head>
	<body>
		<div id="cssmenu">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="seite1.html">Seite1</a></li>
				<li><a href="seite2.html">Seite2</a></li>
				<li class='has-sub'><a href="group1.html">Videos</a>
					<ul>
						<li><a href="subpage1.html">Sub-Page1</a></li>
						<li><a href="subpage2.html">Sub-Page2</a></li>
						<li><a href="subpage3.html">Sub-Page3</a></li>
						<li><a href="subpagex.html">Sub-PageX</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

edit: Diskussion um JS ist hier:
http://www.tutorials.de/smalltalk/390907-js-verbreitung.html

Probleme mit CSS Menü

steeeeven

Grünschnabel

crazy_chicken

Erfahrenes Mitglied

steeeeven

Grünschnabel

crazy_chicken

Erfahrenes Mitglied

Nugorra

Mitglied

Neue Beiträge