Posts Tagged ‘CSS’

CSS Lists as Hierarchical Navigation: Pop Out Menu

June 9th, 2009

Creating a pop out menu is very similar to creating a dropdown menu.

We’ll start by adding a nested list to our basic list menu.

<ul id=”mainmenu”>
<li><a href=”home.html”>Home</a></li>
<li><a href=”services.html”>Services</a></li>
<li>

<ul>
<li><a href=”services1.html”>Service 1</a></li>
<li><a href=”services2.html”>Service 2</a></li>
<li><a href=”services3.html”>Service 3</a></li>
</ul>

</li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”support.html”>Support</a></li>
<li><a href=”about.html”>About</a></li>
<li>

<ul>
<li><a href=”history.html”>Company History</a></li>
<li><a href=”staff.html”>Staff</a></li>
<li><a href=”press.html”>Press Releases</a></li>

</ul>
</li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

popout menu 1

By modifying the CSS, we can move the submenus to the right and hide them until the user hovers over one of the parent menu items. Here are the steps

1. Set the position of the main menu items to relative.

#mainmenu li {
position:relative;
}

2. Position the submenus absolutely and hide the submenus.

#mainmenu li ul {
position: absolute;
width: 150px;
left: 118px;
top: 5px;
display: none;
}

3. Style the submenu options.

#mainmenu li ul li {
font-size: smaller;
}

4. Display the submenu when the user hovers over the main option.

#mainmenu li:hover ul {
display: block;
background-color: #8CC919; /*for IE7*/
}

Note: the background-color declaration is necessary for Internal Explorer 7. Without it, the submenus can disappear while the user is hovering over them.

5. Position a tags relatively. This is another fix for Internet Explorer 7. If the a tags are left statically positioned, then they won’t fill the full width of their parent list items and the menus will only work when users hover over the text of the link.

#mainmenu a {
position: relative; /*for IE7*/
}

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

<style type=”text/css”>

ol, ul {
list-style: none;
}

#mainmenu {
margin: 10px;
width: 120px;
font-family: Tahoma;
}

#mainmenu li {
position:relative;
display: block;
border: 1px solid #333333;
border-top: 0px;
}

#mainmenu li:first-child {
border-top: 1px solid #333333;
}

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
position: relative; /*for IE7*/
}

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}

#mainmenu li ul {
position: absolute;
width: 130px;
left: 79px;
top: 5px;
display: none;
}

#mainmenu li ul li {
font-size: smaller;
}

#mainmenu li:hover ul {
display: block;
}

</style>

</head>

And your pop-out menu now looks like this:

popout menu 2

Resources:

Next week, we will end the CSS Navigation Menu series with “Menus with Background Images”

CSS Lists for Hierarchical Navigation: Dropdown Menu

May 28th, 2009

There was a time with it was necessary to use JavaScript to create dynamic menus. But, the wide support of the :hover pseudo-class has changed that.

To create the dropdown menu, we will first need to add a nested list to our basic list menu.

<ul id=”mainmenu”>
<li><a href=”home.html”>Home</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”support.html”>Support</a></li>
<li><a href=”about.html”>About</a>
<ul>
<li><a href=”history.html”>Company History</a></li>
<li><a href=”staff.html”>Staff</a></li>
<li><a href=”press.html”>Press Releases</a></li>
</ul>

</li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

dropdown menu 1

By modifying the CSS, we can hide the submenus until the user hovers over one of the parent menu items. Here are the steps:

1. Set the position of the main menu item to relative.

#mainmenu li {
position: relative;
}

2. We will also need to set the position of the submenus to absolute. Submenus are contained in the ul elements within the li element.

#mainmenu li ul {
position: absolute;
margin: 0px;
padding: 0px;
left: -3px;
top: 22px;
}

3. Hide the submenus by adding the display:none; to the submenu rule.

#mainmenu li ul {
position: absolute;
margin: 0px;
padding: 0px;
left: -3px;
top: 22px;
display: none;
}

4. Style the submenu options. We can turn the top border off for all but the first submenu item with the :first-class pseudo-class.

#mainmenu li ul li {
width: 150px;
font-size: smaller;
border-top: none;
}

#mainmenu li ul li:first-child {
border-top: 1px solid #333333;
}

5. Display the submenu when the user hovers over the main option. Modern browsers allow the :hover pseudo-class for almost all elements, including list items.

#mainmenu li:hover ul {
display: block;
}

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type=”text/css”> and </style> to your CSS file.

<head>

<style type=”text/css”>

ol, ul {
list-style: none;
}

#mainmenu li {
position:relative;
display:block;
width:120px;
float:left;
margin-left:2px;
border:1px solid #333333;
}

#mainmenu li {
display:block;
width:120px;
float:left;
margin-left:2px;
border:1px solid #333333;
}

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
}

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}

#mainmenu li ul {
position: absolute;
margin: 0px;
padding: 0px;
left: -3px;
top: 25px;
display: none;
}

#mainmenu li ul li {
width: 150px;
font-size: smaller;
border-top: none;
}

#mainmenu li ul li:first-child {
border-top: 1px solid #333333;
}

#mainmenu li:hover ul {
display: block;
}

</style>

</head>

And your dropdown menu now looks like this:

dropdown menu 2

Resources:

Next time, we will take a look at pop-out menus.

CSS Lists as Hierarchical Navigation: Vertical Menu

May 19th, 2009

Vertical menus are created in much the same way as horizontal menus, but they are even easier.

vertical menu

This menu:

  • items aligned vertically
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
list-style: none;
}

2. Set the width and margin of the menu.

#mainmenu {
margin: 10px;
width: 120px;
font-family: Tahoma;
}

This time, the width will be much narrower as we are creating a vertical menu.

3. Set the list items to display as blocks. We will set the border properties by adding borders to the left, right and bottom edges. We will also add a border to the top of the first list item only. We will use the :first-child pseudo-class to do this.

#mainmenu li {
display: block;
border: 1px solid #333333;
border-top: 0px;
}

#mainmenu li:first-child {
border-top: 1px solid #333333;
}

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
color:#FFFFFF;
}

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type=”text/css”> and </style> to your CSS file.

<head>
<style type=”text/css”>

ol, ul {
list -style: none;
}

#mainmenu {
margin: 10px;
width: 120px;
font- family: Tahoma;
}

#mainmenu li {
display: block;
border: 1px solid #333333;
border-top: 0px;
}

#mainmenu li:first-child {
border-top: 1px solid #333333;
}

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
}

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}
</style>

</head>

Resources:

> Next time, we will try our hands on the dropdown menu.

CSS Lists for Hierarchical Navigation

May 12th, 2009

Navigation bars or menus present a list of choice to the visitor. For example,

  • Home
  • Services
  • Products
  • Support
  • About
  • Contact

Often these choices will have nested options. For example, under About, you might find:

  • Company History
  • Staff
  • Press Releases

Menus as Lists

We’ll start by marking up the first list shown above as HTML and giving the list an id of “mainmenu”.

<ul id=”mainmenu”>
<li><a href=”home.html”>Home</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”support.html”>Support</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

With no CSS, this menu will display as follows:

example1

Over the next few weeks, we will show you how to turn the list into a stylish navigation menu:

  • horizontal menu
  • vertical menu
  • drop-down menu
  • pop-out menu


Resources:

*CSS is supported on all Doteasy web hosting plan, including $0 Hosting. All you need is a simple text editor, ie. Notepad.

For more information on the basics of CSS, Website-Tutorial.net is a good place to start.

CSS Lists as Hierarchical Navigation: Horizontal Menu

May 12th, 2009

horizontal_menu

This menu:

  • items aligned horizontally
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
list-style: none;
}

2. Set the width and margin of the menu.

#mainmenu {
margin: 10px;
width: 750px;
font-family: Tahoma;
}

Setting the width prevents the menu from wrapping when the user shrinks the browser window.

3. Set the list items to display as blocks. We will also give them a width and float them to the left so they will be displayed to the right of the preceding item. We will also give them a margin border.

#mainmenu li {
display: block;
width: 120px;
float: left;
margin-left: 2px;
border: 1px solid #333333;
}

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
}

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}

The Full CSS Code

So, to achieve the horizontal menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type=”text/css”> and </style> to your CSS file.

<head>
<style type=”text/css”>

ol, ul {
list-style: none;
}

#mainmenu {
margin:10px;
width:750px;
font-family: Tahoma;
}

#mainmenu li {
display:block;
width:120px;
float:left;
margin-left:2px;
border:1px solid #333333;
}

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
}

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}
</style>
</head>


Resources:

>> Stay tuned as next time, we will be creating a vertical menu.