Page 1 of 1

PURE CSS Menu UI Rate Topic: -----

#1 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Posted 10 April 2011 - 11:42 PM

Posted Image

This is part 1 of a 3 part series I'm going to be doing on UI menu design. I decided to start with a simple sub-menu, similar to Amazon.com, using pure CSS. There are a lot of fun things you can do with just CSS, and that's what I'm aiming to address. Some of you guys may think my code is a bit superfluous. I know. I wanted to touch on a couple of things that I've noticed get asked about on the forums here, so if you have anything you'd like to point out... feel free.

First step, grab the code and image zip Attached File  GJ_ui_tut_pt1_images.zip (1.37K)
Number of downloads: 291:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D.I.C -- Horizontal Menu Tutorial</title>
<link href="styles/horizontal_menu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

	<div id="header">
    
   	  <div id="title"><h1>Pure<span style="color:#F90">CSS</span></h1><div id="sub_title">Horizontal Menus</div></div>
        
        	<ul class="nav">
            
            	<li><a href="#" class="sub_men_flt">Recommended</a><a href="#" class="sub_menu_flyout sub_men_flt"></a>

                    	<ul class="sub_men_ul">
                        
                        	<li><a href="#">Tacos</a></li>
                            <li><a href="#">Burritos</a></li>
                            <li><a href="#">Chimichangas</a></li>
                            <li><a href="#">Gelado</a></li>
                        
                        </ul>
                
                </li>
                <li><a href="#">Your Account</a></li>
                <li><a href="#" class="shp_crt">Shopping Cart</a></li>
                <li class="nav_last" ><a href="http://www.dreamincode.net/forums/">Help!</a></li>
            
            </ul>
	</div></div>
</body>
</html>



CSS:
/* Simple CSS Reset -- This is used to clean out some of the cross-browser garbage. This is, like I said, a simple css reset. I normally use a much more robust reset that is taylored to my projects. If you don't know much about the CSS reset, I highly recommend a google search. It definitely helps. */

body, div, ul, li, a, img { margin:0; padding:0; border:none; outline:none; text-decoration:none; list-style:none; } /* Lumped together main element reset */

div { position:relative; } /* Makes ALL div elements have a relative positioning. I use this most of the time, you will notice a couple of elements that I specifically made position:absolute. */

body { font-family:Arial, Helvetica, sans-serif; } /* Not my favorite font, but I did just recently watch that Helvetica documentary, so... */

/* Wrapper Elements */

#wrapper { width:1000px; margin:0 auto; } /* Defines the main wrapper element. 1000px width, and 0 top and bottom margins with a centered layout. */

#header { height:125px; } /* Self explanatory. */

/* Title Element Styling */

#title { width:150px; font-size:14px; line-height:100%; }

#title h1 { font-size:32px; }

#sub_title { width:108px; line-height:100%; left:23px; bottom:15px; border-bottom:#000 solid 2px; }

/* Nav Elements */

.nav { position:absolute; display:block; bottom:5px; right:5px; font-size:12px; } /*Sets the location of the .nav container class*/

.nav li { display:block; float:left; line-height:120%; border-right:#000 1px solid; }/*Defines how the LI elements function in the main .nav class*/

.nav li.nav_last { border-right:none; } /*Removes the | from the right of the LI elements in the top level .nav*/

.nav a { display:block; padding:0 5px; color:#000; } /*Sets up the anchor tags so they fill the LI elements, as well as some styling.*/

.nav a.sub_menu_flyout { width:15px; margin-left:-5px; height:13px; margin-top:1px; background:url(../images/arrows_hor_menu.png) top center no-repeat; } /*Sets up the flyout button for any sub_menu elements*/

.nav a.shp_crt { height:15px; margin-left:5px; padding-left:20px; background:url(../images/shp_crt_nav.png) top left no-repeat; }/*Shopping cart img*/

ul.sub_men_ul {  display:none; position:absolute; padding:10px 5px; width:125px; top:14px; left:0; background-color:#F60; border:5px solid #FFF; } /*Sub menu UL styling { (display:none;) is important for the pure CSS drop-down approach }*/

/*The > is a child selector, more reading can be done at http://www.w3.org/TR/CSS21/selector.html#child-selectors*/

.nav li:hover > ul.sub_men_ul { display:block; } /*This line is how we show the sub_men_ul element on hover*/

.nav li:hover > a { color:#F90; } /*Connects all anchor elements in my <span> for the sub_menu*/

.nav li:hover > a.sub_menu_flyout { background:url(../images/arrows_hor_menu.png) bottom center no-repeat; } /*Connects all anchor elements in my <span> for the sub_menu*/

.sub_men_flt { float:left; } /*Floats my anchor elements in the main nav class for a sub menu*/

ul.sub_men_ul li { float:none; border:0; line-height:120%; } /*Styling for sub menu LI elements*/

ul.sub_men_ul li a { color:#FFF; padding-left:10px; background:url(../images/arw_blts.png) center left no-repeat; } /*Styling for sub menu LI anchor elements*/

ul.sub_men_ul li a:hover { color:#000; } /*Styling for sub menu LI anchor:hover elements*/


As you can see, I've laid out the site in a normal fashion with a wrapper and header element. I wanted to have a somewhat practical model to begin with, instead of just setting a menu and having it hanging out in the upper left corner of the browser. I then applied a basic CSS reset to get the majority of browsers all using the same base, if you will. This cuts out some of the 1px margin errors and other goofy stuff that can occur. I also remove list-styles and anchor ugliness that bugs me, such as borders and outlines.

Next, we establish a class to hold our navigation. That's going to be the .nav class in our CSS. I give it an absolute positioning so I can control where it sits in relation to it's parent element, Mr. #header.

Now, we'll set up our line item elements. We utilize a block display here, so that they are more malleable, and then we float them left. I utilized a line-height of 120% so that the text is centered in the height of the element, plus 10% above and below the text, and then I set a border right to add a divider between our navigation elements. I also made the .nav_last class to remove the border from our last link.

This part may seem a bit convoluted, as it is the first LI, but I wanted to explain the child selector and give you some options to play with. Options that I feel may help you understand this wonderful selector. If you feel like going the more simplistic route, set up your anchor element like I did on the shopping cart class, push the text over and set your backgroung image.

<li><a href="#" class="sub_men_flt">Recommended</a><a href="#" class="sub_menu_flyout sub_men_flt"></a>

          <ul class="sub_men_ul">
                        
              <li><a href="#">Tacos</a></li>
              <li><a href="#">Burritos</a></li>
              <li><a href="#">Chimichangas</a></li>
              <li><a href="#">Gelado</a></li>
                        
          </ul>
                
     </li>


This main LI encompasses two anchor tags, which I've linked using the :hover pseudo-class and the > child selector. The first a tag contains the menu text, and the second contains the flyout image we're going to be using. I also wanted to point out that I am using two classes separated by a space, in this second a tag. You can do this. You can actually fit a lot more than two in there.

*Sidenote: If you're not sure whether you should use a class or an ID, just remember... ID's should only be used once and generally define what something is. Classes can be reused and usually define what something does.

Now, when you set up the child :hover events... it's important that you link to the LI parent element, like so, li:hover > ul.ul_whatever, or you'll be scratching your head for a bit. As you want the hover event to trigger the display of your unordered list item.

After that it's just styling. Play around with the element sizing and positioning to get a feel for those things. If you have questions, fire away. I'm sure I left a lot out. This is my first tutorial, so critique away.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1