Probleme mit CSS Menü


steeeeven

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

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

Erfahrenes Mitglied
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

Grünschnabel
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

Erfahrenes Mitglied
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? :D
 

Nugorra

Mitglied
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
 

Neue Beiträge