Archive for Menus

CSS Fixed Menu – Pinned-Down Style

Tuesday, January 29, 2008  No Comment - Leave a Comment

CSS is such a simple, but powerful mechanism for adding style to websites which makes your design options infinite. One of the most common uses of CSS is to create nice looking and useful menus for websites. We can create all kinds of different styles for menus: Horizontal, vertical, with drop down boxes, etc.

Pinned-Down Style

There’s another technique that I found to be very interesting and pretty cool to apply to our menus. It’s called Pinned-Down Style. Our menu is going to be in a fixed position on the page and when the user scrolls up and down the menu will float over the page at the position we defined.

The XHTML Code:


...
<body>

<div class="banner">
    <p>
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Our Activities</a>
        <a href="#">Contact Us</a>
        <a href="#/">Site Map</a>
        <a href="#">Privacy</a>
        <a href="#">Links</a>
        <a href="#">Our Partners</a>
        <a href="#">Articles</a>
    </p>
</div>
...

This is just a paragraph with links that we are going to style with CSS. We can see the final result after we apply the following CSS code:

The CSS Code:


div.banner {
	margin: 0;
	font-size: 100% /*adjust to make the menu larger or smaller*/;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	position: fixed;
	top: 2em;
	left: auto;
	width: 8.5em;
	right: 2em;
}

div.banner p {
	margin: 0;
	padding: 0.3em 0.4em;
	font-family: Arial, sans-serif;
	background: #990000;
	border: thin outset #000;
	color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #CCC }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Summary

This is a good technique for a website that has a lot of content. It enables the user to access the menu quickly instead of having to scroll up the page to access the menu in order to navigate the site. What makes this work are the the 2 following rules: position: fixed; which causes the menu to be in a fixed position, and the display: block; that makes the a elements inside the menu to be displayed as block elements causing them to display one below the other.

It would be a good idea to place the XHTML code for the menu at the top of all the content, right below the opening body tag for organization purposes.

That’s it. Pretty simple. Play around with these settings and find the best design for your needs!

Examples:

Click here see an example.

Credits:

W3C: CSS Fixed Menus

No Comment - Leave a Comment

Creating CSS Rollover Buttons

Thursday, December 6, 2007  No Comment - Leave a Comment

There are many different alternatives when it comes to creating rollover buttons for the web with the most popular method being JavaScript. This presents many obstacles: You need to write a script in order to preload the image into the browsers cache, the images will flicker in some browser versions (Internet Explorer in particular due to not being able to cache images) and the most important: using images as text replacement is not search engine friendly.

Now there’s an alternative solution with CSS that eliminates all of these problems!

With this particular technique we will combine the power of images (user friendly and eye candy) and text (search engine friendly) to create a nice looking CSS rollover button with no flickering and preloading necessary.

In this example I used only 2 images for the background, one for the normal state of the button and one for the rollover state:

tab_ro.jpg tab_up.jpg

What we will do is change the background by replacing the image every time the user hovers the link and to make a nice contrast we will also change the color of the text.

The CSS Code:



#nav {
  padding: 0;
  list-style-type: none;
  float: right;
  font-weight: bold;
}

#nav li {
  float: left;
}

#nav a {
  float: left;
  width: 97px;
  height: 60px;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
  background: url(image_rested_state.jpg) no-repeat;
  border-right-width: 1px;
  padding-top: 10px;
}

#nav a:hover {
 background: url(image_rollover.jpg) no-repeat;
 color: #000000;
}

The XHTML Code:


<ul id="nav">
	<li><a href="page1.html">PAGE 1</a></li>
	<li><a href="page2.html">PAGE 2</a></li>
	<li><a href="page3.html">PAGE 3</a></li>
	<li><a href="page4.html">PAGE 4</a></li>
        <li><a href="page5.html">PAGE 5</a></li>
</ul>

Summary:

This CSS technique allows us to swap images while still keeping text in our link, giving us the advantage of having graphics for human viewers and text for Web Crawlers.

Examples:

You can see a working example at www.ithelps.org

No Comment - Leave a Comment