TYPO3 - Standard Navigation (CSS): Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „== Beispiel 1 - Einfache Metanavigation == == Beispiel 2 - Level1 Horizontale Top Navigation, Level 2-n Vertikale Navigation an der Seite == Beispiel von drPetri…“)
 
Zeile 1: Zeile 1:
−
== Beispiel 1 - Einfache Metanavigation ==
+
== Komplettes Navigations CSS für allgemeine Stile, vertikale, horizontale und Dropdown Menü ==
 +
Erklärung:
  
−
== Beispiel 2 - Level1 Horizontale Top Navigation, Level 2-n Vertikale Navigation an der Seite ==
+
* Die Container aller Navigationen erhalten die Klasse .nav, darin werden zentrale Stilelemente der HP definiert (Farben etc.)
 +
* Horizontale Navigationen enthalten die Klasse .nav-h
 +
* Vertikale die Klasse .nav-v
 +
* Dropdown Menüs die Klasse .nav-dd
 +
 
 +
Weitere Klassen sind li.cur, li.act und li.no die entsprechen den TYPO3 Konventionen current Links (aktuell gewählt) active Links (übergeordnete des .cur Links und Normale (.no) Links
 +
 
 +
<pre>
 +
 
 +
.invisible, li dfn {
 +
height:0;
 +
left:-2000px;
 +
position:absolute;
 +
width:0;
 +
}
 +
/* Common navigation styles */
 +
 
 +
.nav {
 +
}
 +
 
 +
.nav ul{
 +
list-style: none outside none;
 +
}
 +
 
 +
.nav li{
 +
margin: 0;
 +
}
 +
 
 +
.nav li li {
 +
font-size:90%;
 +
padding:0 0 0 0;
 +
}
 +
.nav li li li {
 +
padding-left:1em;
 +
}
 +
.nav a,
 +
.nav li.no a,
 +
.nav li.act li.no a,
 +
.nav li.cur li.no a {
 +
color: #9b9b9b;
 +
text-decoration: none;
 +
}
 +
 
 +
.nav a:hover,
 +
.nav li.act a,
 +
.nav li.cur a {
 +
text-decoration: none;
 +
color: #035578;
 +
}
 +
 
 +
.nav a:hover{
 +
color: #035578 !important;
 +
}
 +
 
 +
ul.nav {
 +
margin:0;
 +
padding:0;
 +
}
 +
 
 +
ul.nav li {
 +
list-style:none outside none;
 +
line-height: 23px;
 +
}
 +
 
 +
/* horicontal navigations */
 +
.nav-h li{
 +
display:inline;
 +
margin: 0 20px 0 0;
 +
padding:0;
 +
}
 +
 
 +
/*vertical navigations */
 +
 
 +
.nav-v {
 +
float:left;
 +
}
 +
 
 +
.nav-v #nav-sub{
 +
 
 +
}
 +
.nav-v ul {
 +
/*padding:0 0 10px 0;*/
 +
/*ie8..*/
 +
float: left;
 +
width:100%;
 +
/*
 +
background: url("http://localhost/typo3_test/fileadmin/templates/960gs/media/nav-divider.png");
 +
background-repeat: no-repeat;
 +
background-position: bottom;
 +
*/
 +
/*
 +
padding-bottom: 1px;
 +
*/
 +
}
 +
 
 +
.nav-v li.first{
 +
}
 +
 
 +
.nav-v li {
 +
/*
 +
background: url("http://localhost/typo3_test/fileadmin/templates/960gs//media/nav-divider.png");
 +
background-repeat: no-repeat;
 +
*/
 +
font-weight:normal;
 +
list-style-position:outside;
 +
margin: 0;
 +
padding: 0;
 +
/* ie8 */
 +
width:100%;
 +
float: left;
 +
}
 +
 
 +
.nav-v li.last {
 +
margin-bottom: 1px;
 +
}
 +
 
 +
.nav-v li a {
 +
display:block;
 +
height: 23px;
 +
line-height:23px;
 +
text-decoration:none;
 +
}
 +
 
 +
.nav-v li a{
 +
}
 +
 
 +
.nav-v li a:hover,
 +
.nav-v li.cur a,
 +
.nav-v li.act a
 +
{
 +
 
 +
/*
 +
background: url("media/bg-over.png");
 +
background-repeat: no-repeat;
 +
background-position: 0 1px;
 +
*/
 +
}
 +
 
 +
/* Level 2 */
 +
.nav-v ul ul{
 +
padding: 0;
 +
}
 +
.nav-v li li {
 +
display: inline;
 +
font-size:11px;
 +
/* ie8 */
 +
border-bottom: 0px;
 +
 +
}
 +
.nav-v li li a{
 +
height: 24px;
 +
line-height: 24px;
 +
}
 +
 
 +
.nav-v li.act li a,
 +
.nav-v li.cur li a{
 +
color:#ccc;
 +
}
 +
 
 +
.nav-v li li a:hover,
 +
.nav-v li li.cur a:visited,
 +
.nav-v li li.cur a:link
 +
{
 +
color: #ccc;
 +
}
 +
.nav-v li li.act a:visited,
 +
.nav-v li li.act a:link{
 +
 
 +
}
 +
 
 +
.nav-v li li.act {
 +
}
 +
.nav-v li li.act a:link,
 +
.nav-v li li.act a:visited {
 +
}
 +
 
 +
 
 +
/* Drop Down Navigation */
 +
.nav-dd {
 +
z-index: 80;
 +
position: relative; left:0px;
 +
}
 +
 
 +
.nav-dd ul {
 +
/* all lists */
 +
padding: 0;
 +
margin: 0;
 +
}
 +
 
 +
.nav-dd li { /* all list items */
 +
float: left;
 +
position: relative;
 +
/*width: 10em;*/
 +
/* width needed or else Opera goes nuts */
 +
width: auto;
 +
padding-right: 1.7em;
 +
}
 +
 
 +
.nav-dd ul li a {
 +
display: inline;
 +
/*height:20px;*/
 +
padding: 2px 8px;
 +
}
 +
 
 +
.nav-dd li ul { /* second-level lists */
 +
background: white;
 +
border: 1px solid dotted #CCC;
 +
position: absolute;
 +
width:auto;
 +
top: 24px;
 +
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
 +
}
 +
.nav-dd li.act ul,
 +
.nav-dd li.cur ul { /* Dont hide active parts */
 +
left: 0;
 +
}
 +
 
 +
.nav-dd li:hover ul,
 +
.nav-dd li.sfhover ul { /* lists nested under hovered list items */
 +
left: 0em;
 +
}
 +
 
 +
.nav-dd li ul a {
 +
display: block;
 +
background: #FFF;
 +
width: auto;
 +
padding: 0px 8px;
 +
border: none;
 +
}
 +
 
 +
.nav-dd :hover > a,
 +
.nav-dd ul ul :hover > a {
 +
background:transparent;
 +
}
 +
 
 +
.nav-dd ul ul a { /* 2.Navi-Ebene Schrift normal*/
 +
font-weight: normal;
 +
font-size: 12px;
 +
}
 +
 
 +
 
 +
/* Metanavigation, sprachnavigation */
 +
#nav-meta,#nav-lang {
 +
/*
 +
float:left;
 +
margin-left: 0px;
 +
*/
 +
}
 +
 
 +
#nav-meta li,
 +
#nav-lang li {
 +
 
 +
}
 +
#nav-meta li.first,
 +
#nav-lang li.first{
 +
margin-left:0;
 +
padding-left:0;
 +
}
 +
#nav-meta li.last,
 +
#nav-lang li.last{
 +
border:medium none;
 +
margin:0;
 +
}
 +
 
 +
#nav-meta a:link,
 +
#nav-meta a:visited,
 +
#nav-lang a:link,
 +
#nav-lang a:visited {
 +
/* color:#CCC */;
 +
}
 +
#nav-meta a:hover,
 +
#nav-meta a:active,
 +
#nav-lang a:hover,
 +
#nav-lang a:active{
 +
text-decoration: underline;
 +
}
 +
 
 +
 
 +
</pre>
 +
 
 +
== Beispiel - Einfache Metanavigation ==
 +
 
 +
== Beispiel - Level1 Horizontale Top Navigation, Level 2-n Vertikale Navigation an der Seite ==
 
Beispiel von drPetri
 
Beispiel von drPetri
  

Version vom 16. Februar 2012, 15:34 Uhr

Komplettes Navigations CSS für allgemeine Stile, vertikale, horizontale und Dropdown Menü

Erklärung:

  • Die Container aller Navigationen erhalten die Klasse .nav, darin werden zentrale Stilelemente der HP definiert (Farben etc.)
  • Horizontale Navigationen enthalten die Klasse .nav-h
  • Vertikale die Klasse .nav-v
  • Dropdown Menüs die Klasse .nav-dd

Weitere Klassen sind li.cur, li.act und li.no die entsprechen den TYPO3 Konventionen current Links (aktuell gewählt) active Links (übergeordnete des .cur Links und Normale (.no) Links 


.invisible, li dfn {
	height:0;
	left:-2000px;
	position:absolute;
	width:0;
}
/* Common navigation styles */

.nav {
}

.nav ul{
	list-style: none outside none;
}

.nav li{
	margin: 0;
}

.nav li li {
	font-size:90%;
	padding:0 0 0 0;
}
.nav li li li {
	padding-left:1em;
}
.nav a,
.nav li.no a,
.nav li.act li.no a,
.nav li.cur li.no a { 
	color: #9b9b9b;
	text-decoration: none;
}

.nav a:hover,
.nav li.act a,
.nav li.cur a {
	text-decoration: none;
	color: #035578;
}

.nav a:hover{
	color: #035578 !important;
}

ul.nav {
	margin:0;
	padding:0;
}

ul.nav li {
	list-style:none outside none;
	line-height: 23px;
}

/* horicontal navigations */
.nav-h li{
	display:inline;
	margin: 0 20px 0 0;
	padding:0;
}

/*vertical navigations */

.nav-v {
	float:left;
}

.nav-v #nav-sub{

}
.nav-v ul {
	/*padding:0 0 10px 0;*/
	/*ie8..*/
	float: left;
	width:100%;
/*
	background: url("http://localhost/typo3_test/fileadmin/templates/960gs/media/nav-divider.png");
	background-repeat: no-repeat;
	background-position: bottom;
*/
/*
	padding-bottom: 1px;
*/
}

.nav-v li.first{	
}

.nav-v li {
/*
	background: url("http://localhost/typo3_test/fileadmin/templates/960gs//media/nav-divider.png");
	background-repeat: no-repeat;
*/
	font-weight:normal;
	list-style-position:outside;
	margin: 0;
	padding: 0;
	/* ie8 */
	width:100%;
	float: left;
}

.nav-v li.last {
	margin-bottom: 1px;
}

.nav-v li a {
	display:block;
	height: 23px;
	line-height:23px;
	text-decoration:none;
}

.nav-v li a{
}

.nav-v li a:hover,
.nav-v li.cur a,
.nav-v li.act a
{

/*
	background: url("media/bg-over.png");
	background-repeat: no-repeat;
	background-position: 0 1px;
*/
}

/* Level 2 */
.nav-v ul ul{
	padding: 0;
}
.nav-v li li {
	display: inline;
	font-size:11px;
	/* ie8 */
	border-bottom: 0px; 
	
}
.nav-v li li a{
	height: 24px;
	line-height: 24px;
}

.nav-v li.act li a,
.nav-v li.cur li a{
	color:#ccc;
}

.nav-v li li a:hover, 
.nav-v li li.cur a:visited,
.nav-v li li.cur a:link
{
	color: #ccc;
}
.nav-v li li.act a:visited,
.nav-v li li.act a:link{

}

.nav-v li li.act {
}
.nav-v li li.act a:link, 
.nav-v li li.act a:visited {
}


/* Drop Down Navigation */
.nav-dd {
	z-index: 80;
position: relative; left:0px;
}

.nav-dd ul { 
/* all lists */
padding: 0;
margin: 0;
}

.nav-dd li { /* all list items */
	float: left;
	position: relative;
	/*width: 10em;*/ 
	/* width needed or else Opera goes nuts */
	width: auto;
	padding-right: 1.7em;
}

.nav-dd ul li a {
	display: inline;
	/*height:20px;*/
	padding: 2px 8px;
}

.nav-dd li ul { /* second-level lists */
	background: white;
	border: 1px solid dotted #CCC;
	position: absolute;
	width:auto;
	top: 24px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
.nav-dd li.act ul,
.nav-dd li.cur ul { /* Dont hide active parts */
	left: 0;
}

.nav-dd li:hover ul, 
.nav-dd li.sfhover ul { /* lists nested under hovered list items */
	left: 0em;
}

.nav-dd li ul a {
	display: block;
	background: #FFF;
	width: auto;
	padding: 0px 8px;
	border: none;
}

.nav-dd :hover > a, 
.nav-dd ul ul :hover > a {
	background:transparent;
}

.nav-dd ul ul a { /* 2.Navi-Ebene Schrift normal*/
	font-weight: normal;
	font-size: 12px;
}


/* Metanavigation, sprachnavigation */
#nav-meta,#nav-lang {
/*
	float:left;
	margin-left: 0px;
*/
}

#nav-meta li,
#nav-lang li {

}
#nav-meta li.first,
#nav-lang li.first{
	margin-left:0;
	padding-left:0;
}
#nav-meta li.last,
#nav-lang li.last{
	border:medium none;
	margin:0;
}

#nav-meta a:link, 
#nav-meta a:visited,
#nav-lang a:link,
#nav-lang a:visited {
/*	color:#CCC */;
}
#nav-meta a:hover, 
#nav-meta a:active,
#nav-lang a:hover,
#nav-lang a:active{
	text-decoration: underline;
}

Beispiel - Einfache Metanavigation

Beispiel - Level1 Horizontale Top Navigation, Level 2-n Vertikale Navigation an der Seite

Beispiel von drPetri 

.invisible, li dfn {
	height:0;
	left:-2000px;
	position:absolute;
	width:0;
}
/* Common navigation styles */

.nav {
}

.nav li li {
	font-size:90%;
	padding:0 0 0 1em;
}
.nav li li li {
	padding-left:1em;
}

.nav a, .nav a:link, 
.nav a:visited {
	text-decoration:none !important;
	color: #9b9b9b;
}
ul.nav a:hover, ul.nav a:active, 
li.act, li.act a, 
li.cur, li.cur a {
	color: #3c3c3c !important;

}
ul.nav {
	margin:0;
	padding:0;
}

ul.nav li {
	list-style:none outside none;
	line-height: 23px;
}

/* horicontal navigations */
.nav-h li{
	display:inline;
	margin: 0 20px 0 0;
	padding:0;
}

/*vertical navigations */

.nav-v {
	float:left;
}

.nav-v #nav-sub{

}
.nav-v ul {
	/*padding:0 0 10px 0;*/
	/*ie8..*/
	float: left;
	width:100%;
/*
	background: url("http://localhost/typo3_test/fileadmin/templates/960gs/media/nav-divider.png");
	background-repeat: no-repeat;
	background-position: bottom;
*/
/*
	padding-bottom: 1px;
*/
}

.nav-v li.first{	
}

.nav-v li {
/*
	background: url("http://localhost/typo3_test/fileadmin/templates/960gs//media/nav-divider.png");
	background-repeat: no-repeat;
*/
	font-weight:normal;
	list-style-position:outside;
	margin: 0;
	padding: 0;
	/* ie8 */
	width:100%;
	float: left;
}

.nav-v li.last {
	margin-bottom: 1px;
}

.nav-v li a {
	display:block;
	height: 23px;
	line-height:23px;
	text-decoration:none;
}

.nav-v li a{
}

.nav-v li a:hover,
.nav-v li.cur a,
.nav-v li.act a
{

/*
	background: url("media/bg-over.png");
	background-repeat: no-repeat;
	background-position: 0 1px;
*/
}

/* Level 2 */
.nav-v ul ul{
	padding: 0;
}
.nav-v li li {
	display: inline;
	font-size:11px;
	/* ie8 */
	border-bottom: 0px; 
	
}
.nav-v li li a{
	height: 24px;
	line-height: 24px;
}

.nav-v li.act li a,
.nav-v li.cur li a{
	color:#ccc;
}

.nav-v li li a:hover, 
.nav-v li li.cur a:visited,
.nav-v li li.cur a:link
{
	color: #ccc;
}
.nav-v li li.act a:visited,
.nav-v li li.act a:link{

}

.nav-v li li.act {
}
.nav-v li li.act a:link, 
.nav-v li li.act a:visited {
}

/* Top Navigation */
#nav-top{
	margin-bottom: 32px;
	text-transform: uppercase;
}

/* Side Navigation */
#nav-side{
	
}
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=TYPO3_-_Standard_Navigation_(CSS)&oldid=18995“