4 Replies - 2063 Views - Last Post: 26 April 2011 - 05:51 PM

#1 Galaxy_Stranger   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 102
  • Joined: 07-February 06

I need help understanding menus made with CSS.

Posted 21 April 2011 - 10:38 PM

I'm wanting to make a drop-down menu for site navigation. This is exactly the functionality I want: http://www.w3schools...trydhtml_menu10

But that example uses Javascript, which I want to avoid. I'm sure it can be done with CSS, but I don't think I understand all the properties.

This is what I have as far as css:
#admin_bar
{
	border				:	0px solid blue ;
	margin-top			:	-12px ;
	width				:	992px ;
	height				:	20px ;
	margin-left			:	auto ;
	margin-right			:	auto ;
	margin-bottom			:	100px ;
	color				:	#ffffff ;
	background-color		:	#000000 ;
}

.admin_bar
{
	border: 0px solid red ;
	margin-top			:	-12px ;
	height				:	20px ;
	width				:	992px ;
}

.admin_bar ul
{
	padding-top			:	2px ;
	height				:	20px ;
	width				:	950px ;
}

.admin_bar li
{
	display				:	inline ;
	height				:	20px ;
	width				:	992px ;
	background-color		:	green ;
}

.admin_bar  ul li a
{	display				:	block ;}

.admin_bar ul li ul
{	display				:	block ;}

.admin_bar ul li:hover ul li ul
{	display				:	block ;}

.admin_bar ul li:hover ul li a
{	display				:	block ;}

.admin_bar ul li:hover ul li:hover ul
{	display				:	block ;}

.admin_bar ul li:hover ul li:hover ul li a
{	display				:	block ;}



All I need is two or three layers deep.

Can anyone help explain how this works?

Is This A Good Question/Topic? 0
  • +

Replies To: I need help understanding menus made with CSS.

#2 GhandiJones   User is offline

  • D.I.C Head
  • member icon

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

Re: I need help understanding menus made with CSS.

Posted 21 April 2011 - 11:05 PM

That is quite easily done in HTML/CSS without javascript. I have actually submitted a tutorial on this, just waiting for it to get processed and accepted. Here is some code to see how it works.

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="#">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 made position:absolute. */

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

/* 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*/

Was This Post Helpful? 2
  • +
  • -

#3 Finney_3   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 75
  • Joined: 17-April 10

Re: I need help understanding menus made with CSS.

Posted 24 April 2011 - 05:40 AM

Wow that was awsome that you took the time to go through everything you did and give a comment next to it so he could understand how the drop down menu can be done. This is good for someone who is not familiar with what they are doing or fully understand. Great job helping out.
Was This Post Helpful? 0
  • +
  • -

#4 GhandiJones   User is offline

  • D.I.C Head
  • member icon

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

Re: I need help understanding menus made with CSS.

Posted 25 April 2011 - 09:17 PM

Thanks man. I appreciate it. I just hope it helps him.
Was This Post Helpful? 0
  • +
  • -

#5 Galaxy_Stranger   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 102
  • Joined: 07-February 06

Re: I need help understanding menus made with CSS.

Posted 26 April 2011 - 05:51 PM

Thanks GhandiJones - I'm gonna learn a lot from this!

And as a bonus, I have discovered the CSS RESET!
Posted Image
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1