ezzemm
2006-01-12, 08:34:58
Hallo zusammen!
Ich habe für einen Bekannten eine Homepage erstellt (www.fz-k.de (http://www.fz-k.de)). Dafür habe ich ein simples, aber einfach zu bedienendes CMS verwendet.
Die Navigation ist mittels eines Stylesheets realisiert, den Code habe ich unten gepostet.
Ich würde gern unter die Navigation einen Text und ein Minibanner mit Link plazieren; sprich Werbung.
Kann mir unserer Coding-Koriphäen sagen, wie der entsprechende Code aussieht? ;)
/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper determines the width of the menu elements */
#menuwrapper {
width: 200px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
margin-left: -1px;
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
margin-bottom: -1px;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
border: 1px solid #006699;
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #ececec;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #C7C7C7;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth {
background-image: url(modules/CSSMenu/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #E7AB0B;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hack, will cause the css to not validate */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }
Ich habe für einen Bekannten eine Homepage erstellt (www.fz-k.de (http://www.fz-k.de)). Dafür habe ich ein simples, aber einfach zu bedienendes CMS verwendet.
Die Navigation ist mittels eines Stylesheets realisiert, den Code habe ich unten gepostet.
Ich würde gern unter die Navigation einen Text und ein Minibanner mit Link plazieren; sprich Werbung.
Kann mir unserer Coding-Koriphäen sagen, wie der entsprechende Code aussieht? ;)
/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper determines the width of the menu elements */
#menuwrapper {
width: 200px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
margin-left: -1px;
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
margin-bottom: -1px;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
border: 1px solid #006699;
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #ececec;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #C7C7C7;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth {
background-image: url(modules/CSSMenu/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #E7AB0B;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hack, will cause the css to not validate */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }