Menu help

[ciscoguy24]

Hey guys I almost have my basic layout done. :) Site is at

http://www.digitaleyesandears.com/testing/One/center1.html

And my problem is with the top plus sign. How can I make it not pop down the image when you click on the plus sign? I am thinking its either a margin setting or a padding setting but cannot find it. Also how could I move the plus sign down a bit? I do use javascript for the plus sign but css for the menu. Any ideas?


Thanks

adam

[KDLA]

You're adding a line of text when the js is implemented, so the page naturally goes down to accommodate it. Create a blank div as a placeholder for when the js isn't implemented.

KDLA

[ciscoguy24]

You're adding a line of text when the js is implemented, so the page naturally goes down to accommodate it. Create a blank div as a placeholder for when the js isn't implemented.

KDLA

KDLA,

Hey thanks for your help. How would I do that? I am not sure what you mean :confused:

[KDLA]

<a href="#" onclick="javascript: document.getElementById('divTable').style.display=(document.getElementById('divTable').style.display =='none')?'block':'none'">{+}</a>
<div id="divTable" style="display:none">

<ul id="navlisttop">
<li><a href="test.html">About snappingLIFE</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>



Create a placeholding div for your menu; a div with the height and width that exists whether <ul> is in it or not.
Like this:


<div style="height: 2em; line-height: 2em;">

<a href="#" onclick="javascript: document.getElementById('divTable').style.display=(document.getElementById('divTable').style.display =='none')?'block':'none'">{+}</a>
<div id="divTable" style="display:none">

<ul id="navlisttop">
<li><a href="test.html">About snappingLIFE</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>

That way, a div with height is holding that space - whether blank or not. So, when the "+" is clicked the menu fills that div, rather than appearing out of nowhere.

Clear as mud?
KDLA

[ciscoguy24]

<a href="#" onclick="javascript: document.getElementById('divTable').style.display=(document.getElementById('divTable').style.display =='none')?'block':'none'">{+}</a>
<div id="divTable" style="display:none">

<ul id="navlisttop">
<li><a href="test.html">About snappingLIFE</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>



Create a placeholding div for your menu; a div with the height and width that exists whether <ul> is in it or not.
Like this:


<div style="height: 2em; line-height: 2em;">

<a href="#" onclick="javascript: document.getElementById('divTable').style.display=(document.getElementById('divTable').style.display =='none')?'block':'none'">{+}</a>
<div id="divTable" style="display:none">

<ul id="navlisttop">
<li><a href="test.html">About snappingLIFE</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>

That way, a div with height is holding that space - whether blank or not. So, when the "+" is clicked the menu fills that div, rather than appearing out of nowhere.

Clear as mud?
KDLA

Hey thanks I did what you said but still jumps down..... hmmmmmm

[pcthug]

Added a div, navlist, it is set so that it doesnt interfere with the rest of the page;

<div id="navlist">
<a href="#" onclick="javascript: document.getElementById('divTable').style.display=(document.getElementById('divTable').style.display =='none')?'block':'none'">{+}</a>
<div id="divTable" style="display: none;">
<ul id="navlisttop">
<li><a href="http://www.digitaleyesandears.com/testing/One/test.html">about</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</div>



#navlist
{
position: absolute;
top: 0;
right: 20%;
left: 20%;
}

NOT TESTED IN IE

[ciscoguy24]

Added a div, navlist, it is set so that it doesnt interfere with the rest of the page;

<div id="navlist">
<a href="#" onclick="javascript: document.getElementById('divTable').style.display=(document.getElementById('divTable').style.display =='none')?'block':'none'">{+}</a>
<div id="divTable" style="display: none;">
<ul id="navlisttop">
<li><a href="http://www.digitaleyesandears.com/testing/One/test.html">about</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</div>



#navlist
{
position: absolute;
top: 0;
right: 20%;
left: 20%;
}

NOT TESTED IN IE

Hey pcthug that works great in FF but not IE. Any ideas on how to make it work for both?

[ciscoguy24]

Hey guys can anybody help me with this?


*Bump*

[KDLA]

Why don't you try this technique: http://www.htmldog.com/articles/suckerfish/dropdowns/
instead of using what you've got now?
CSS

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 12pt;
}

#nav a {
display: block;
width: 10em;
text-decoration: none;
}

#nav li { /* all list items */
float: left;
width: 10em;/* width needed or else Opera goes nuts */
color: gray;
/*color: #626b8d;*/
}

#nav li a {background-color: gray; color: #ffffff;}

#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background-color: gray;
}

#nav li ul li {
background-color: gray;
}

#nav li ul li.bottom {
border-bottom: 0;
}

#nav li ul li a {
background-color: #ffffff;
color: black;
border-top: 0 solid gray;
border-right: 1px solid gray;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
padding: 2px 4px;
font-size: 85%; width:100%;
}
#nav li ul li a:hover {
background-color: #black;
color: white;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}


HTML

<ul id="nav">
<li><a href="#">Links</a>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>


for the external js file

// JavaScript Document
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>


KDLA

[ciscoguy24]

Why don't you try this technique: http://www.htmldog.com/articles/suckerfish/dropdowns/
instead of using what you've got now?
CSS

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 12pt;
}

#nav a {
display: block;
width: 10em;
text-decoration: none;
}

#nav li { /* all list items */
float: left;
width: 10em;/* width needed or else Opera goes nuts */
color: gray;
/*color: #626b8d;*/
}

#nav li a {background-color: gray; color: #ffffff;}

#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background-color: gray;
}

#nav li ul li {
background-color: gray;
}

#nav li ul li.bottom {
border-bottom: 0;
}

#nav li ul li a {
background-color: #ffffff;
color: black;
border-top: 0 solid gray;
border-right: 1px solid gray;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
padding: 2px 4px;
font-size: 85%; width:100%;
}
#nav li ul li a:hover {
background-color: #black;
color: white;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}


HTML

<ul id="nav">
<li><a href="#">Links</a>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>


for the external js file

// JavaScript Document
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>


KDLA


Hey kdla thanks for this but I really want to stick with the concept that I have. It works great in FF but not IE. Pcthug are you around?

[ciscoguy24]

Hey Ray are you out there? I am almost done guys!!! Just need to get this to work. I found a site that uses the same style menu. Its dailysnap.com... Look at the top and you will see the plus sign. Could anybody look at that code and see how it works? I tried it and couldn't get it to work right in IE. Thanks guys


adam

[pcthug]

It uses alot of JS, as this is the only way to get it working correctly in IE.
As it is set to display: none by default, this means 10% of people will not be able to navigate around your site, so you really should rethink about using Javascript for displaying something as important as your main menu.

[ciscoguy24]

It uses alot of JS, as this is the only way to get it working correctly in IE.
As it is set to display: none by default, this means 10% of people will not be able to navigate around your site, so you really should rethink about using Javascript for displaying something as important as your main menu.


Hey Pcthug I actually got it working across FF and IE. I know it uses JS but most browsers out there now support JS right? I changed the JS to this

<div id="navlist">

<a href="#" onclick="javascript:
document.getElementById('divTable').style.visibility=(document.getElementById('divTable').style.visi bility=='hidden')?'visible':'hidden'">{+}</a>

<div id="divTable" style="visibility:hidden;">

<ul id="navlisttop">
<li><a href="http://www.digitaleyesandears.com/testing/One/test.html">about</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</div>


I am using the visibility:hidden instead of none

[pcthug]

I know it uses JS but most browsers out there now support JS right
All (Modern) Browsers have full JS support, although about 10% of internet users have JS disabled for one reason or another - they will therefore have difficulty navigating your site

BTW, good find with the visibility:hidden fix :)

[ciscoguy24]

All (Modern) Browsers have full JS support, although about 10% of internet users have JS disabled for one reason or another - they will therefore have difficulty navigating your site

BTW, good find with the visibility:hidden fix :)


Well I guess you can't please em all. :) Thanks pcthung and KDLA for your help. :) Without people like you I would be dead in the water. :)