Sub Menus

**R Schreiber** · Jul 30, 2011 22:13

This is what I have from a ListMatic menu: ("Horizontal Button")

I'm trying to ad subMenus to a few of these but can't seen to find an example.

Also - will the subMenus inherit the css formatting from the main menu item?

Code:

<div id="navcontainer"> <!-- From ListMatic "Horizontal Buttons"-->
 	<ul id="navlist">
 	<li id="active"><a href="index.html" id="current">HOME PAGE</a></li>
 	<li><a href="#">PAST NEWSLETTERS</a></li>
 	<li><a href="#">SEARCH FOR HOMES</a></li>
 	<li><a href="#">IMPORTANT DATA</a></li>
 	<li><a href="#">FOR SELLERS</a></li>
 	<li><a href="#">FOR BUYERS</a></li>
 	<li><a href="#">PRICE HISTORY</a></li>
    <li><a href="#">MEDIAN SALE PRICES</a></li>
 	</ul>
 	</div>
</div><!--end of navigation div -->

Thanks Rick

**ralph.m** · Jul 31, 2011 06:33

Use the example here as your model:

Horizontal Drop Down Menus

Just view source to get the whole code.

Yes, rules are inherited unless you are careful, but you can easily get around that.

**R Schreiber** · Jul 31, 2011 09:39

Questions:

Is JavaScript compatible across most browsers?

The menu I'm working on now does not have JavaScript. It's strictly html and css.

Which is most compatible across browsers?

Thanks Ralph.

Rick

**oddz** · Jul 31, 2011 12:54

If you can get away without using JavaScript, then don't use it. The simplest of drop downs does not require JavaScript except for an IE6 work around due to lack of support for hover on anything besides an anchor.

**ralph.m** · Jul 31, 2011 15:25

Originally Posted by R Schreiber

Is JavaScript compatible across most browsers?

The menu I'm working on now does not have JavaScript. It's strictly html and css.

Which is most compatible across browsers?

Most browsers support JS, but even if using that, it's important to make sure the menu works without it. As oddz said, the only browsers that needs it is IE6, to make the hover work. All the same, JS is often recommended for dropdowns, as it can make life easier for some people who have difficulty maneuvering around the screen (with a delay on the appearance and disappearance of the sub menus, for example, in case the mouse strays). I'm not so sure dropdaowns are a good idea anyway. All the same, the example I linked to above is a CSS dropdown and is very reliable.

**R Schreiber** · Jul 31, 2011 16:12

This is so frustrating!

Please see Properties With Style Orange County Real Esate

If I place the menu below the <div id="outer"> it prevents changes in some of the menu structures as width, alignment etc.

If I place the menu under the outer div and above the <h1 class="tang"> my h1 text loses all of the @font-face formatting and displays in block characters.

If I place it under the <h1 class="tang"> then my menu is to far from the top of the page.

This is just unbelievable.

Html and css have far too many idiosyncrasies. There is nothing about it that's happy!

How doI fix this.

thanks . . . rick

**ralph.m** · Jul 31, 2011 16:22

Anything is hard if you don't know what you're doing. I'd rather learn CSS and HTML than the ins and outs of real estate.

What's the problem with the menu as it is now?

**R Schreiber** · Jul 31, 2011 16:29

i'm just real frustrated.

If you can see the menu on my site it's fine with me as it is except I will need drop down submenus on a few of the main items.

Also as I said my <h1 class="tang"> is not formatted.

It also seem that my menu is aligned more to the left than the center.

Can't seem to fix this.

Here is my current css. when I look at this I probably only understand about 50 percent of it. In playing with it is where I lose control of what is already working.

Code:

@charset "utf-8";  /* CSS Document */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 28, 2011 12:15:00 AM America/New_York */
/* 7/31/2011 */


@font-face {
    font-family: 'TangerineRegular';
    src: url('fonts/Tangerine_Regular-webfont.eot');
	src: local("☺"),
   	scr: url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Tangerine_Regular-webfont.woff') format('woff'),
         url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
         url('fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.tang	{font-family:'TangerineRegular', arial, san-serif;
		 font-size:460%;
		 color:#6CF;
         font-weight:normal;
		 text-align: right;
		 font-weight: normal;
    	 font-style: normal;
}

h1 br 	 {display:none;}

h1 small {display:block; font-size:50%; font-weight:normal;}

html, body	{color:#000;
			 background-image: url(images/blinds1.png);
			 background-attachment:fixed;
			 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 margin-top:1%;
			 margin-right:1%;
			 margin-bottom:1%;
			 margin-left:1%;
			 margin:0;
}

#outer		{width:96%;
			 margin:auto;
			 max-width:1200;
			 min-width:600;
			 margin-right:2%;
			 margin-left:2%;

}

1
.floated_element {float:right;
				  width: 900px;
				  margin:5px;
				  display: inline; /*IE6 workaround */
}				  

/* NAVIGATION STARTS HERE: FROM LISTMATIC */
#navcontainer
 {
 background: #FFF  /*#f0e7d7; */
 margin: 0 auto;
 padding: 1em 0 0 0;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 text-transform: capitalize;
 text-align:center; /*aligns text only */
 
 }

 /* to stretch the container div to contain floated list */
 #navcontainer:after
 {
 content: ".";
 display: block;
 line-height: 1px;
 font-size: 1px;
 clear: both;
 }

 ul#navlist
 {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 width: 100%;
 font-size: 0.7em;
 
 }

 ul#navlist li
 {
 display: block;
 float: left;
 width: 12%;
 margin: 0;
 padding: 0;
 }

 ul#navlist li a
 {
 display: block;
 width: 100%;
 padding: 0.5em;
 border-width: 1px;
 border-color: #006 #333;
 border-style: solid;
 color: #777;
 text-decoration: none;
 background: transparent;  /*#021A68  #f7f2ea; */
 }

 #navcontainer>ul#navlist li a { width: auto; }

 ul#navlist li#active a
 {
 background: transparent;
 color: #0FF; /* #800000; */
 }

/* HOVER borders around each block button - text color indise block */
 ul#navlist li a:hover, ul#navlist li#active a:hover
 {
 color: #0FF;
 background: transparent;
 border-color: #aaab9c #fff #fff #ccc;
 }

/* END OF NAVIGATION LIST  */

#p			{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 line-height: 1.2; 
			 color: #6CF; 
			 float:right;
			 text-align: justify;
			 
}

#content p	{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 line-height: 1.2; 
			 color:#6CF; 
			 text-align:right;
}

#branding	{text-align: right;}

.image img	{float:right;}

p.image 	{overflow: hidden;}

#disclaim 	{font-size: 70%;}

#disclaim p	{padding:0; margin:.5em 0;}

#footer   	{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 font-size:68%;
			 font-style:normal
			 line-height: 120%; 
			 color:#6CF; 
			 text-align: justify;
			 width:94%;
			 margin-right:2%;
			 margin-left:2%;
}


/* eND css*/

Thanks Ralph . . .

**ralph.m** · Jul 31, 2011 16:50

Originally Posted by R Schreiber

my <h1 class="tang"> is not formatted.

Hmm, not sure why @font-face isn't working. Was it working before, and if so, what did you change?

It also seem that my menu is aligned more to the left than the center.

Fix that by changing the code in red:

Code:

ul#navlist li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 12.5%;
}

**R Schreiber** · Jul 31, 2011 17:00

Something is really wrong.

The <p> content is way out of bounds.

NO CHANGES I make to any css call has a new result.

your suggestion regarding the width to 12.5 made no change.

For fun I reset the css outer to max-width:900 from 1200 - NO CHANGE at all!

Some container or something is all of a sudden very wrong and nothing allows any change.

The footer however is working perfectly.

css footer:

Code:

#footer   	{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 font-size:68%;
			 font-style:normal
			 line-height: 120%; 
			 color:#6CF; 
			 text-align: justify;
			 width:94%;
			 margin-right:2%;
			 margin-left:2%;
}

Should I try making the css outer the same settings as the footer?

I don't want to have to start over again.

signed frustrated (rick)

**ralph.m** · Jul 31, 2011 17:09

Originally Posted by R Schreiber

your suggestion regarding the width to 12.5 made no change.

Did you change it? The style sheet hasn't been changed. It will work if you try it.

For fun I reset the css outer to max-width:900 from 1200

What's the "CSS outer"?

The footer however is working perfectly.

It's off center for me. Why not use margin: 0 auto? Although, you'd be better off containing your content in a wrapper and putting some bounds on all this.

Are you really going to leave that bg image repeating like that?

**R Schreiber** · Jul 31, 2011 17:16

Thanks so much Ralph.

I gotta stop before I pop a blood vessel.

In my frantic state of mind I removed the <div id="outer"> from the html page. WHAT!

I'm losing it Ralph.

I'll start up again tomorrow.

Thanks again Ralph.

rick

**deathshadow60** · Jul 31, 2011 22:57

Some serious advice -- learn to indent properly. No joke, you're closing more DIV than you open, I suspect you're closing a div (#outer) prematurely after the IMG tag -- which from the looks of things is a presentational image and as such has no business even being in the html. You line up all your openings and closings, you'll see "hey, I'm closing here when I shouldn't be".

Given your site appearance there is NO reason for there to be an extra DIV around your UL... you've got line-breaks (BR) doing what looks padding's job... and it all adds up to why you've got 12 validation errors.

Even your comment placement (yes comments!) could be tripping IE rendering bugs. Putting the comment after the closing tag could result in it being wedged between floats, explaining why here in IE6 and 7 large sections of your content fails to even show up on the page.

... and I know it's frustrating -- trust me, we all start somewhere.

**R Schreiber** · Aug 6, 2011 23:12

I'm not so sure dropdaowns are a good idea anyway. All the same, the example I linked to above is a CSS dropdown and is very reliable.

Can you expand on this for me please.

Why are dropdowns not good idea?

As I'm starting out fresh what would suggest for a cross browser compatible menu?

Thanks . . .

Rick

**ralph.m** · Aug 7, 2011 03:04

Originally Posted by R Schreiber

Why are dropdowns not good idea?

Not everyone browses the web with a mouse; and even if they do, some people will have motor difficulties that make it tricky to do all that hovering and following the links proberly. Much nicer to give them a simple link to click on and drill down into the site.

there there are those on touch devices, where the hover effect probably won't work, so the dropdown is useless anyway. And if the dropdown provides the only way to get to sub pages, they are 'up the creek', as we say here.

And if someone is navigating via a keyboard, they may not be able to tab through all the links easily, unless you have set it up properly. And as most web designers don't have a clue about this, most dropdowns are a disaster from this point of view.

And then there are screen readers. How much fun is it for blind users to have to find their way through all those links? Etc. Etc.

User Tag List

Thread: Sub Menus

Thread Tools

Display

Sub Menus

Bookmarks

Bookmarks

Posting Permissions