/    Sign up×
Community /Pin to ProfileBookmark

Vertical Navbar Menu

Copy linkTweet thisAlerts:
Dec 10.2006

Hello;
Thanks in advance for being here and helping folks.
I am a pretty green web developer and I’ve struggled along with a resource-filled website. It’s gotten to the point where I need to simplify the navigation.
I’ve been looking for a very simple vertical navigation bar which doesn’t depend on an independant css or js file.
Finally I came upon this horizontal navbar
[url]http://www.serve.com/apg/workshop/cssMenu.html[/url]
I got the code and formatted it for my purposes
[url]http://www.yourbodypower.org/navbar.html[/url]
It works nicely and the links look good. However I truly prefer a vertical bar which works with my site layout. If any of you know how to change this horizontal bar into a vertical bar, you will have my extreme gratitude and a link from my site.
Thanks
Aaron

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 10.2006 — http://www.htmldog.com/articles/suckerfish/dropdowns/

[URL=http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html]vertical example[/URL]
Copy linkTweet thisAlerts:
@TaschenDec 10.2006 — [code=html]<!--- originally posted on http://evolt.org/node/45831 -->
<!--- modified for use on terramar.co.uk -->
<style type="text/css">
/*Stick your CSS here*/


</style>
<script language="javascript" type="text/javascript">
<!--
function show(which){
if (document.getElementById && document.createTextNode){
m=document.getElementById("menu");
trig=m.getElementsByTagName("div").item(which).style.display;
if (trig=="block") trig="none";
else if (trig=="" || trig=="none") trig="block";
m.getElementsByTagName("div").item(which).style.display=trig;
var highlighttext="-";
var normaltext="+";
t=m.getElementsByTagName("li").item(which);
h=t.getElementsByTagName("a").item(0).firstChild;
if (trig=="none"){h.nodeValue=h.nodeValue.replace(highlighttext,normaltext);}
else {h.nodeValue=h.nodeValue.replace(normaltext,highlighttext);}
}
}
//-->
</script>
<style type="text/css">#menu div {display:none;}</style>
<!-- Display enable java message if not enabled/installed -->
<noscript>
You need JavaScript enabled or installed for the menus on this site to display properly.
</noscript>
<script language="JavaScript">
<!-- Begin compatibility hacks end -->
<!--

if (!document.getElementById && !document.createTextNode){
document.write('<style type="text/css">#menu div{display:block;}</style>')
}
//-->
</script>
<!-- Backward compatibility hacks end -->
<ul id="menu">
<li><a href="#1" onclick="show(0)">Menu1 +</a></li>

<div><ul><li>Menu item 1</li></ul></div>

</ul>
[/code]
×

Success!

Help @webuser1234 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 4.28,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...