/    Sign up×
Community /Pin to ProfileBookmark

Drop Down Menu?

Copy linkTweet thisAlerts:
Jul 30.2006

Hey can someone help me to make a very simple Horizontal drop down menu. Ive already checked out Dyanmic Drive and they had tons of premade ones but they all have all this extra coding in it that I dont want. And I need a script that will still let the image rollover work when you scroll over the main button. Could someone please help me?

Thanks

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@AlbatrossJul 30.2006 — Keep in mind that neither example will work in Internet Explorer if scripting has been disabled (yes, even the .htc file will not work). You will have to set your top-level links to an alternate page if you want the menu to be accessable to those who have disabled scripting but still have CSS enabled in Internet Explorer.
Copy linkTweet thisAlerts:
@KorJul 30.2006 — Keep in mind that neither example will work in Internet Explorer if scripting has been disabled (yes, even the .htc file will not work). You will have to set your top-level links to an alternate page if you want the menu to be accessable to those who have disabled scripting but still have CSS enabled in Internet Explorer.[/QUOTE]
I don't think so.The Vladdy's menu

http://www.vladdy.net/Demos/CSSNav.html

is a pure CSS one, and it will work nomatter Javascript enabled/disabled. Further more, if you have seen the source, you could have seen that the menu is HTML, so that if an old browser which might not support CSS or or IE has htc blocked, the menu is to be seen anyway, full opened, so that the navigation is preserved.
Copy linkTweet thisAlerts:
@AlbatrossJul 30.2006 — I turned scripting off in Internet Explorer, and was unable to use his menu. .htc files are essentially JScript files that are saved in a different file format. In fact, just to prove it, I'll show you the source code for the .htc file:
<i>
</i>&lt;PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" /&gt;
&lt;PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="RestoreHover()" /&gt;
&lt;SCRIPT LANGUAGE="JScript"&gt;
function DoHover()
{ if(/hassub/.test(element.className)) element.className = 'hassubhover';
else element.className += ' hover'; <br/>
}

function RestoreHover()
{ if(/hassubhover/.test(element.className)) element.className = 'hassub';
else element.className = element.className.replace(/bhoverb/,'');
}

&lt;/SCRIPT&gt;

Looks like a script, acts like a script, even says it's a script. Must be a script then, and as such, can be disabled by turning off scripting support in Internet Explorer (which it can).

Furthermore, the nested lists are not visible while the stylesheet is able to be rendered and scripting has been disabled. I'll post a screen shot for you if you like.
Copy linkTweet thisAlerts:
@IliketheWebauthorJul 30.2006 — Thanks for all the helps guys, Albatross you said Keep in mind that neither example will work in Internet Explorer if scripting has been disabled (yes, even the .htc file will not work). You will have to set your top-level links to an alternate page if you want the menu to be accessable to those who have disabled scripting but still have CSS enabled in Internet Explorer.[/QUOTE] and I was wondering if it would be possible to have it so my site will detect if javascript is enabled and then switch the drop-menus on and turn the top-level links off, and if javascript isn't enabled switch the drop-menus off and turn the top-level links on. Would this be possible?
Copy linkTweet thisAlerts:
@KorJul 30.2006 — Ok. Here's simple , one level, example of collapsable menu, build in javascript. If the javascript is disabled, the menu is to be seen entirely, so that there will be no navigational/acces problem.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
&lt;!--
#menu {
position:relative;
font-family: Arial, Helvetica, sans-serif;
width:100px;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #000000;
}
--&gt;
&lt;/style&gt;
&lt;script type="text/JavaScript"&gt;
subcol='#e5e5e5';//set here the sublinks bgcolor
indent=5;//set here the left sublinks indent in pixels
function coll(){
var dd=document.getElementById('menu').getElementsByTagName('div');
for (var i=1;i&lt;dd.length;i=i+2){
dd[i].style.position='relative';
dd[i].style.display='none';
dd[i].style.backgroundColor=subcol;
dd[i].style.left=indent+'px';
}
}
function activ(w){
var d=w.parentNode.getElementsByTagName('div')[0];
if(d.style.display=='none'){coll();d.style.display='inline'}
else{d.style.display='none'}
}
onload=coll;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Menu --&gt;
&lt;div id="menu"&gt;
&lt;!-- Link1 --&gt;
&lt;div&gt; &lt;a href="#" onclick="activ(this);return false"&gt;LINK 1&lt;/a&gt;&lt;br&gt;
&lt;div&gt; &lt;a href="#" &gt;sub 1.1&lt;/a&gt;&lt;br&gt;
&lt;a href="#" &gt;sub 1.2&lt;/a&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END Link1 --&gt;
&lt;!-- Link2 --&gt;
&lt;div&gt; &lt;a href="#" onclick="activ(this);return false"&gt;LINK 2&lt;/a&gt;&lt;br&gt;
&lt;div&gt; &lt;a href="#" &gt;sub 2.1&lt;/a&gt;&lt;br&gt;
&lt;a href="#" &gt;sub 2.2&lt;/a&gt;&lt;br&gt;
&lt;a href="#" &gt;sub 2.3&lt;/a&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END Link2 --&gt;
&lt;!-- Link3 --&gt;
&lt;div&gt; &lt;a href="#" onclick="activ(this);return false"&gt;LINK 3&lt;/a&gt;&lt;br&gt;
&lt;div&gt; &lt;a href="#" &gt;sub 3.1&lt;/a&gt;&lt;br&gt;
&lt;a href="#" &gt;sub 3.2&lt;/a&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END Link3 --&gt;
&lt;/div&gt;
&lt;!-- END Menu --&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @IliketheWeb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...