Menus in HTML
- If you google HTML menus you'll find dozens of examples, some
simple, some complex.
- Most of the nicer, dropdown menus require some complex JavaScript
to make them work.
- Here are links to a couple of examples that don't:
- I've combined the two examples to create a simple
horizontal dropdown menu
- This code only allows one level of sub menus, no sub-sub menus
- This menu is created using ID classes in CSS.
- ID classes allow you to give a name to updated styles in your
style sheet, use #id tag
- example, the section below adds style attributes to the ul tag
for the menu id, html within a div that uses the id of menu will this
style
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none; /* turn off bullets */
}
- Some highlights to the code are
- display mode of block is
used to get a complete square for the list items
- float left is used on
the list items to make them go horizontally
- text and background colors are changed to make it stand out.
- the hover attribute is
used to change the background when the cursor is over an item
- lists within lists are hidden (using diplay:none) until the
cursor goes over the list item.
- a break is defined to clear the float left. this break
needs to be used at the end of the menu.
- to implement the menu in your html, do the following
- make sure you have the CSS file with your html code
- add a link to your header so that the CSS file is reachable
- define your menu as a ul list inside of a div
- the div should should use id=menu to employ the menu styles
- the last item in the div should be a break (<br />)
- sub menus should go between the menu itmes <li> and
</li>, e.g.
<div
id="menu" style="position:absolute; top:10px;">
<ul>
<li>FGCU
<UL>
<li><a
href="http://www.fgcu.edu" target="_blank">Home</A></li>
<li><a
href="https://gulfline.fgcu.edu"
target="_blank">Gulfline</A></li>
<li><a
href="https://elearning.fgcu.edu"
target="_blank">Angel</A></li>
</ul>
</li>
<li>News
- CSS tricks like this don't work equally in all broswers, or all
versions of browsers. SimpleMenu.Css has been tested with:
- Netscape 7.2
- IE 8.0
- Chrome
- Firefox 6.0
SimpleMenu.CSS
/* define a menu id class */
/* create a list style without bullits */
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none; /* no bullets */
}
/* create a list item style */
#menu li
{
float: left; /* horizontal menu */
margin-right: 0.5em; /* margin 1 character wide */
display: block; /* display mode block */
width: 8em; /* fixed width 0f 8ems, or about 16
characters */
color: white; /* white text */
background-color: blue; /* blue background */
text-align: center; /* center it in the block */
}
/* create a reference link style without the underline and uses block
mode display */
#menu a
{
text-decoration: none; /* remove the underline from the link */
text-align: center; /* center in
the block */
color: white; /*
use white text */
display: block; /* use block mode */
}
/* change the background to teal when you have the cursor over it */
#menu li:hover
{
background-color: teal;
}
/* define make sublist hidden until you hover over their items */
#menu li ul
{
display: none; /* don't display it */
}
/* display the submenu when you hover over its li */
#menu li:hover ul
{
display: block;
}
/* define a clear that removes the float left, a break needs to go
after the menu lists */
#menu br
{
clear:both;
}
SimpleMenuDemo.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Sample HTML Page with a CSS</TITLE>
<LINK rel="stylesheet" type =
"text/css" href="SimpleMenu.css" />
</HEAD>
<BODY>
<div id="menu"
style="position:absolute; top:10px;">
<ul>
<li>FGCU
<UL>
<li><a href="http://www.fgcu.edu"
target="_blank">Home</A></li>
<li><a href="https://gulfline.fgcu.edu"
target="_blank">Gulfline</A></li>
<li><a href="https://elearning.fgcu.edu"
target="_blank">Angel</A></li>
</ul>
</li>
<li>News
<ul>
<li><a href="http://www.cnn.com"
target="_blank">CNN</a></li>
<li><a href="http://www.winktv.com"
target="_blank">WinkTv</a></li>
<li><a href="http://www.news-press.com"
target="_blank">News Press</a></li>
</ul>
</li>
<li>Sports
<ul>
<li><a href="http://www.si.com" target="_blank">Sports
Illustrated</a></li>
<li><a href="http://www.espn.com"
target="_blank">ESPN</a></li>
<li><a href="http://www.foxsports.com" target="_blank">Fox
Sports</a></li>
</ul>
</li>
</ul>
<br />
</div>
<div style="position:absolute;
top:40px;">
line1<br>
line2<br>
line3<br>
</div>
</BODY>
</HTML>