TYPO3 - Standard Navigation (CSS)
Aus Wikizone
Version vom 16. Februar 2012, 15:35 Uhr von 87.180.106.237 (Diskussion) (→Komplettes Navigations CSS für allgemeine Stile, vertikale, horizontale und Dropdown Menü)
[Bearbeiten]
Erklärung: Die Navigation ist kompatibel zu TYPO3 kann aber natürlich auch für andere Projekte eingesetzt werden. Das Dropdown Beispiel ist für ein 2 Level Menü ausgelegt. Mehr Level sind schlecht zu bedienen. Für Touchscreens ist es wichtig den Unterbaum des Dropdown einzublenden wenn etwas Aktiv ist.
- 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;
}
[Bearbeiten]
[Bearbeiten]
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{
}
