Welcome to reychop's sanctuary and resting place. Here, you will see life beyond the black curtain of the dark firewall. Delve into human desires. Care to look beyond the dark firewall?
Posts
When in need of a Horizontal Navigation, always use CSS and HTML. Here's a guide for quick remembering. NOTE: I did not write this. It's just copied here for reminders and such.
Visit this link http://phoenity.com/newtedge/horizontal_nav/
Here's a mini version
CSS horizontal navigation list
Thanks to Eric Meyer for inspiration.
There are two versions:
1. "Inline" version
2. "Block" version
"Inline" version
* Browsers
o Mozilla
o Firefox
o Camino
o K-meleon
o Galeon
o Netscape
o Internet Explorer
o Opera
o Safari
o Konqueror
* Web Design
o W3C
o A List Apart
o css/edge
o MaKo 4 CSS
o CSS Layout Techniques
o Real World Style
o css-discuss
o CSS Pointers Group
* Search Engines
o Google
o Open Directory
o Yahoo!
o All The Web
o Teoma
o Wisenut
* Freeware
o Freeware World Team
o Tiny Apps
o AnalogX
o Freeware Arena
o Pricelessware
* Technology
o Lockergnome
o Langa
o Scot Finnie's newsletter
o BrowserTune
o TechTV
o Neowin
o Call For Help
o Axcel216
o Wired
This is a demonstration of a horizontal navigation list or menu, which pops up a vertical drop-down menu when hovered.
The HTML codes are very simple, as follows:
The ul tag is assigned with the class of nav. That's the only class needed to be refered from the style sheet. The CSS codes are shown below, with comments:
/*** Nav bar styles ***/
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
ul.nav>li:hover{
padding-right: 1px;
} [*]
ul.nav li>ul{
/*Make the sub list items invisible*/
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
/*When hovered, make them appear*/
display : block;
}
.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
padding: 2px 10px;
}
/*** Menu colors (customizable) ***/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
"Block" version
* Browsers
o Mozilla
o Firefox
o Camino
o K-meleon
o Galeon
o Netscape
o Internet Explorer
o Opera
o Safari
o Konqueror
* Web Design
o W3C
o A List Apart
o css/edge
o MaKo 4 CSS
o CSS Layout Techniques
o Real World Style
o css-discuss
o CSS Pointers Group
* Search Engines
o Google
o Open Directory
o Yahoo!
o All The Web
o Teoma
o Wisenut
* Freeware
o Freeware World Team
o Tiny Apps
o AnalogX
o Freeware Arena
o Pricelessware
* Technology
o Lockergnome
o Langa
o Scot Finnie's newsletter
o BrowserTune
o TechTV
o Neowin
o Call For Help
o Axcel216
o Wired
This "block" version is obviously similar to the above one but the little difference lies in the width of the list label items. The whole navigation bar has a width of 100% as each label item always has similar width too, even if the browser window is resized, regardless of how much the numbers of label items are.
The codes are exactly the same as the "inline" version but with some minor additions to the ul.nav selector:
ul.nav{
display: table;
/*Just add the following properties and values*/
width: 100%;
table-layout: fixed;
}
Notes
Please note that the look of the navigation bar can be changed and modified with a few tweaks into the codes based on your knowledge of (X)HTML and CSS with some trial and error experiments.
One of the disadvantages of this navigation bar is that currently it's only limited to two-level navigational list, not more than three as it might break the whole layout. Also, display: none is not friendly for screen readers.
There are also other quite similar CSS test cases:
* Hierarchical dynamic menu with CSS made by Petr Stanicek.
* CSS Pop-Up Menus made by Seamus P. H. Leahy.
* Pure CSS Pull-Down Menus made by Stuart Robertson.
* A List Apart: Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.
* The padding-right property has been removed due to the rendering tested on Mozilla Firefox 1.0, compared to the previous builds.
No comments:
Post a Comment