Hi guys:
Can anyone point me to some sample code that can emulate the menu mechanism (currently jsquery driven).
Or suggestions as to other ways?
Sherman Oaks Real Estate, Studio City Homes, Encino Investment Property - Scott Nell
Thanks to all
Well I never thought about a height…why would that be required? Was it zero?
I can’t use that grey bar on the index page as it muddies up the transparency beneath it.
So taking your lead about class, I created a new one
ul#nav.homeonly {
width:760px;
font-size:100%;
position: relative;
text-align: center;
margin-top:-56px;/* for testing SET THIS FOR EVENTUAL HEIGHT*/
}
ul#nav ul {
font-size:100%;
font-weight:bold;
text-align:left;
}
and applied it thus:
<ul id=“nav” class=“homeonly”>
<li><a href=“#”>THE TEAM</a>
<ul>
But, it simply thumbed it’s nose at me.
Just adjust the top position on hover to something closer. You have top:40px so make it top:35px and tweak until it works.
ul#nav li:hover ul, ul#nav li.over ul {
border: 1px solid #555555;
font-weight: bold;
[B] top: 35px;[/B]
z-index: 99;
}
To change the background of the first level you could try something like this.
ul#nav {
[B] background:#ccc;[/B]
font-size: 100%;
[B] height: 40px;[/B]
margin-top: -56px;
position: relative;
text-align: center;
width: 760px;
}
You’ll need a height or it won’t show.
Yes that did work but with another side effect. The submenus are now too far from the tabs vertically so a visitor will have to be quick so as to not lose the hover.
Sherman Oaks Real Estate, Studio City Homes, Encino Investment Property - Scott Nell
and how do I put the entire tabset into a low-grey background…the best I’ve been able to hit is the background-color applied to each individually?
Thanks !
I would have used a class in the body tag instead e.g. .homeonly ul#nav{}.
To center the menu you would need to give each anchor the correct width and then use text-align:center to center the text. You wouldn’t need any side padding then. You would also remove the 40px margin from the list element.
Then you would need to make sure that any of those changes are cancelled out or reset on nested elements or the dropdowns will be affected also.
To position the drop down/up then just change the left position so that it starts at the right spot. It should be the same for all assuming your elements are equally spaced.
I can’t do it for you as my computer is down at the moment so I suggest you give it a try yourself. Hopefully I will be up and running in a couple of days.
Now, I’d like to center the menu so that the level1 submenu’s raise directly into the swf panes (rather than left/right) as they are now.
I’m pretty sure that to do that I have to set the width to exactly the width of the swf (738px)
ul#nav {
width:738px;
and that I need to eliminate the margin-left:40px in the ul#nav li { which is likely not helping me.
So with that removed I now have a left-justified menu.
Now, how do I get 6 equal divisions of 123px (738/6) and center the text AND the 1st level submenu so that the 1st level submenus arise into the panes?
In other words, do I simply center the tabs and the submenus over them? and how?
Well ok,…it did look fine in IE 8. Is there a better form you would recommend rather than the ul#nav.homeonly?
Yes because the lists were floated and therefore removed from the flow so the parent has zero height unless you cocntain it.
I can’t use that grey bar on the index page as it muddies up the transparency beneath it.
So taking your lead about class, I created a new one
ul#nav.homeonly {
width:760px;
font-size:100%;
position: relative;
text-align: center;
margin-top:-56px;/* for testing SET THIS FOR EVENTUAL HEIGHT*/
}
ul#nav ul {
font-size:100%;
font-weight:bold;
text-align:left;
}
and applied it thus:
<ul id=“nav” class=“homeonly”>
<li><a href=“#”>THE TEAM</a>
<ul>
But, it simply thumbed it’s nose at me.
I can’t see that you have negated the background colour anywhere.
Remember that styles applied to #nav will still be applied. You would need to reset the background colour to transparent with your new class. (Note IE6 doesn’t like classes separated by the dot notation method and gets them wrong or worse still half right.)
It’s not quite clear what that link is for. Is that your site? Or do you want a menu as on that site? It’s a horizontal menu, not vertical.
Sorry yes, unclear. The link is for the site that for which I wish to convert to CSS. It IS a horizontal menu that pops its level 2 vertically. If I replace the javascript with a CSS menu, I’d like to mimic that behavior.
I don’t think that’s possible in CSS, but I wanted to ask it here.
If you are using the suckerfish type menu then you would just subsitute “top” and use bottom:0.
In this example the menu is moved up 37px.
ul#nav li:hover ul,
ul#nav li.over ul {/* style hover nav*/
border:1px solid #555;
background:#252526;
color:#fff;
font-weight:bold;
z-index:99;
[B]bottom:37px;[/B]/* on top of current item*/
padding:5px 0px;
}
Cooooooool!
I loved the example, and it helped me tremendously after playing with it to my tastes. This will work great.
Now, a small gotcha. Can I put this OVER a Flash content using SWFObject.
I know it should involve z-index, but at which level (CSS) would that work?
Thanks again, this is great.
Paul
Hi,
You can layer flash in the normal way with z-index and position:relative (absolute if needed) but you need to set the wmode parameters of the flash object to transparent or opaque to allow this to happen.
There’s a very old sticky in the flash forum that explains it.
Well that kinda sortof worked but the menu still doesn’t show over the flash. I think I followed the directions carefully enough. IE and Firefox distinctly show them differently;
Anybody with ideas?
You don’t seem to have followed all that I said 
Only positioned elements can have a z-index and you missed out the wmode parameter from the inner object.
object{position:relative;z-index:1}
u#navl, ul#nav ul {
z-index:999;
position:relative;
}
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="739" height="307">
<param name="movie" value="http://scottnell.com.previewdns.com/files/scottnell.swf" z-index: 1; />
[B]<param name="wmode" value="transparent" />[/B]
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://scottnell.com.previewdns.com/files/scottnell.swf" width="739" height="307">
[B]<param name="wmode" value="transparent" />[/B]
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Well I finally got this to work, and learned a lot about CSS in the process.
2 final questions:
- In the example stated earlier, Untitled Document
Can there be a 2nd level dropdown without embedding it in the same menu?
Look at Buyers/Sellers here to see what’s happening
Sherman Oaks Real Estate, Studio City Homes, Encino Investment Property - Scott Nell
Will I need to move to Suckerfish to do this?
- How do I remove the underlines?
Thanks for ALL of your help
Hi,
You need to keep control of your page as you have introduces a lot of errors this early on. Run the page through the validator and clear up any issues such as unclosed tags, duplicate tags (such as two body tags) and broken tags. You can’t wrap a table in a p element as p elements can only hold inline content.
Your extra menu is invalid as it needs to be within a nested list like this:
<ul id="nav" >
<li><a href="#">THE TEAM</a>
<ul>
<li class="current"> <a href="team-profiles-c14041.html">Team Profiles</a> </li>
<li> <a href="scott-nell-profile--c14051.html">Scott Nell Profile</a> </li>
<li> <a href="john-aaroe-group-c14043.html">John Aaroe Group</a> </li>
<li> <a href="team-philosophy--c14042.html">Team Philosophy</a> </li>
<li> <a href="testimonials-c14052.html">Testimonials</a> </li>
<li> <a href="press-features-c14059.html">Press/Features</a> </li>
</ul>
</li>
<li><a href="#">ENTERTAINMENT</a>
<ul>
<li><a href="confidentiality-agreement--c14044.html">Confidentiality</a></li>
<li><a href="clientele_list.html">Text</a></li>
</ul>
</li>
<li><a href="#">ALL OUR KIDS <br />
FOUNDATION</a>
<ul>
<li><a href="vision--c14048.html">Vision</a></li>
<li><a href="events-c14049.html">Events</a></li>
<li><a href="programs-c14045.html">Programs</a></li>
<li><a href="donate-c14050.html">Donate</a></li>
</ul>
</li>
<li><a href="#">BUYERS/SELLERS</a>
<ul>
<li><a href="first_time_mortgage_buyers.html">First Time Mortgage Buyers</a>
<ul>
<li><a href="#">Test Text</a></li>
<li><a href="#">Test Text 2</a></li>
</ul>
</li>
<li><a href="#">Text</a></li>
</ul>
</li>
<li><a href="#">RESOURCES</a>
<ul>
<li><a href="#">Lorem ipsum text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Link Link </a></li>
<li><a href="#">Lorem ipsum text goes here</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Link Link </a></li>
<li><a href="#">Lorem ipsum text</a></li>
</ul>
</li>
</ul>
To add another flyout you basically have to do more of the same and style the nested list as required and move it into the correct position. It’s easier to have a fixed width if you want more than one flyout.
Something very roughly like this:
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
margin-left:auto; /* ENTIRE ROW POSITIONING */
margin-right:auto;
z-index:100;
}
ul#nav {
width:760px;
font-size:100%;
position: relative;
text-align: center;
margin-top:-56px;/* for testing SET THIS FOR EVENTUAL HEIGHT*/
}
ul#nav ul {
font-size:100%;
font-weight:bold;
text-align:left;
}
ul#nav li {
position: relative;
float: left;
margin-left:40px;
display:inline;
}
ul#nav li a {
display:block;
font-weight:bold;
height:36px;
line-height:18px;
padding:2px 10px;/* create space*/
}
* html ul#nav li a {
float:left
}
* html ul#nav li li a {
float:none
}
ul#nav li li a {
height:auto;/* reset height on nested lists*/
line-height:normal;/* reset line-height on nested lists*/
}
ul#nav li a, ul#nav li a:visited {
color:#051586;
text-decoration:none;
text-align:left;
}
#nav li ul { /* SUBMENU VERTICAL POSITIONING RELATIVE TO MAIN ROW*/
left:-10px;
position: absolute;
margin-left:-999em;/* hide the menu*/
border:1px solid #555;
width:220px;
}
ul#nav li li {
margin:0;
float:none;
}
ul#nav li:hover ul, ul#nav li.over ul {/* style hover nav*/
border:1px solid #555;
font-weight:bold;
z-index:99;
bottom:40px;/* on top of current item*/
}
#nav li:hover ul, #nav li.over ul {
margin:0;/* show the menu*/
}
#nav li:hover ul ul, #nav li.over ul ul {
margin-left:-999em;/* hide nested menu*/
}
#nav li:hover li:hover ul, #nav li.over li.over ul {
margin-left:0;
padding:0;
left:220px;
bottom:-20px;/* show nested menu*/
}
#nav li ul li {
margin:0
}
ul#nav li:hover, ul#nav li.over {
z-index:99
}
ul#nav li li a{
border:1px solid #555;
margin-top:-1px;
background:#051586;
position:relative;
z-index:1000;
text-decoration:none;
padding:1px 10px;
color:#FDB813;
font-weight:normal;
text-decoration:none;
}
ul#nav li li a:visited{color:#FDB813;}
/* this sets all hovered lists */
#nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color:#fff;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color:#FDB813;
}
object {
position:relative;
z-index:1
}
On subsequent pages, the menu should drop down, not up (since subsequent pages won’t have flash. Is this an easy fix in the navmenu or is everything upside down and I’d have to start over?
Thanks.