Menu icon Foundation

My Posts

No Content

My Comments

dwarak besant commented on Imameatball's post over 3 years

Surfing the web one finds many different solutions for drop-down menus, of which many involve or even solely depend on JavaScript. I would like to present another option which I personally find really cool because it’s easy to use and utilizes features within the HTML and CSS standards without any weird workarounds.
The example in this article will render a simple horizontal menu with submenus that are displayed when you move the mouse over the menu.
 
Let me start by introducing you to the HTML code of the menu. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Cozy Couch</a></li>
<li><a href="">Great Table</a></li>
<li><a href="">Small Chair</a></li>
<li><a href="">Shiny Shelf</a></li>
<li><a href="">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
The next step is adding the CSS styles that will make the menu look good and provide the effect of showing/hiding the submenus. Note the “magic” that comes from using :hover.
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
That’s actually it. Now you’re up and running and can modify the CSS to fit your website’s layout.  
 
Java training in chennai | Android training in chennai | Oracle dba Training in Chennai

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Imameatball's post over 3 years

Surfing the web one finds many different solutions for drop-down menus, of which many involve or even solely depend on JavaScript. I would like to present another option which I personally find really cool because it’s easy to use and utilizes features within the HTML and CSS standards without any weird workarounds.
The example in this article will render a simple horizontal menu with submenus that are displayed when you move the mouse over the menu.
 
Let me start by introducing you to the HTML code of the menu. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Cozy Couch</a></li>
<li><a href="">Great Table</a></li>
<li><a href="">Small Chair</a></li>
<li><a href="">Shiny Shelf</a></li>
<li><a href="">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
The next step is adding the CSS styles that will make the menu look good and provide the effect of showing/hiding the submenus. Note the “magic” that comes from using :hover.
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
That’s actually it. Now you’re up and running and can modify the CSS to fit your website’s layout.  
 
Java training in chennai | Android training in chennai | Oracle dba Training in Chennai

Posts Followed

Following

  • No Content

Followers

  • No Content