zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Tab-Menu

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.11.2007, 17:40
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard CSS Tab-Menu

Hallo,
ich würde gerne ein schönes Tab-Menu bauen analog zu dem Beispiel hier:
soll ungefär so aussehen:Dynamic Drive DHTML Scripts -DD Tab Menu (5 styles)
Code:
<style>
html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: center;
}

#Wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 765px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #D0D2C1;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 765px;
float: left;
border: 1px solid #C0C0C0;
display: block;
}

#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin: 0px;
width: auto;
height: auto;
}

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}

ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 658px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 11px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}

ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #D0D2C1;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}

ul#primary a {
background: #e8e9e1;
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
background: #F1F1ED;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
}
ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -1.6em;
left: 1px;
width: 100%;
}

ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #D0D2C1;
text-decoration: none;
}

ul#secondary li a:hover {
color: #333;
background-color: #D0D2C1;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}

ul#secondary li a:active {
color: #000;
background-color: #D0D2C1; }

ul#secondary li:last-child a { border: none; }

</style>
</head>

<body>

<div id="Wrapper">

<div id="Navigation">
      <ul id="primary">
            <li><a href="#">home</a></li>
            <li><a href="#" class="active">services</a>
                  <ul id="secondary">
                        <li><a href="#">web design</a></li>
                        <li><a href="#">flash design</a></li>
                        <li><a href="#">content management</a></li>
                  </ul>
            </li>
            <li><a href="#">about us</a></li>
            <li><a href="#">contact us</a></li>
      </ul>
</div>
<div id="Container">
<div id="Content">
</div>
</div>

</div>
Allerdings soll das Menu eine 2.te Ebene haben die darunter angezeigt wird.
Die habe ich als 2.te ul/li Liste dargestellt.
Jetzt würde ich gerne das wenn ich mit der Mouse darüber fahre(Rollover), das bereits das Submenu angezeit wird, und auch auf die Tabs geklickt werden kann.
Hat jemand evtl. eine Idee oder schon Erfahrung mit solchen schönen Menüs?

Viele liebe Grüße
jenny
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.11.2007, 18:30
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Hier hat Langenberg so etwas gebaut: Cascading Style Sheets { Tutorial : Hybride CSS Menüs }

Allerdings kommt du so um JavaScript nicht herum d.h. alle ohne JS können deinen Navigation nicht ausreichend verwenden.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.11.2007, 18:42
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

hmmmm..... das stimmt natürlich!!
Aber ansonsten ist das eigentlich schon genau das was ich suche... was hälsst du von diesem Menu:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Horizontal expanding menu on a CSS line</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS from tutorials of www.alsacreations.com/articles */
body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 50px;
top: 20px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head>

<body>

<div id="menu">
	<dl>

		<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sub Menu 1.1</a></li>
					<li><a href="#">Sub Menu 1.2</a></li>
					<li><a href="#">Sub Menu 1.3</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sub Menu 2.1</a></li>
					<li><a href="#">Sub Menu 2.2</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sub Menu 3.1</a></li>

					<li><a href="#">Sub Menu 3.2</a></li>
					<li><a href="#">Sub Menu 3.3</a></li>
					<li><a href="#">Sub Menu 3.4</a></li>
					<li><a href="#">Sub Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>

	
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sub Menu 4.1</a></li>
					<li><a href="#">Sub Menu 4.2</a></li>
					<li><a href="#">Sub Menu 4.3</a></li>

				</ul>
			</dd>
	</dl>
	
</div>

</body>
</html>
Lg
Mit Zitat antworten
  #4 (permalink)  
Alt 18.11.2007, 18:51
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Ich würde das JavaScript nur benutzen, damit der IE es auch kapiert, alle anderen beherrschen ":hover" auch für andere Elemente als <a>.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 19.11.2007, 03:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Unter FAQ Punkt 8 gibt's einen Link auf eine Übersicht mit zahllosen Varianten ohne JS, hast Du dort schonmal geschaut?
Mit Zitat antworten
  #6 (permalink)  
Alt 22.10.2012, 14:38
Neuer Benutzer
neuer user
 
Registriert seit: 26.09.2006
Beiträge: 9
chevron08 befindet sich auf einem aufstrebenden Ast
Standard

wo finde ich denn diese FAQ und den Punkt 8 mit den Beispielen?
Danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 22.10.2012, 14:57
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Hier findest du die FAQ (Punkt 8)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Kindelement eines ausgeblendeten Elternelementes ansprechen wandler CSS 7 19.06.2010 02:32
CSS Flyout Menu z-index Problem? Deluxestyler CSS 6 18.05.2010 13:05
Css Tree Fly Menu thiagojonas CSS 7 30.12.2008 21:10
CSS Menu - active Seite hervorheben celine70 CSS 2 20.12.2008 00:59
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:16 Uhr.