/    Sign up×
Community /Pin to ProfileBookmark

create a navigation menu with only css

Copy linkTweet thisAlerts:
Mar 29.2006

Here’s what i’m trying to create:

home | rates | about

I’m trying to create a simple text-only navigation menu. Indeed this isn’t too difficult; I can create the styling, hover, etc just fine, but i’m wondering if i can use ONLY html/css to create the effect so that when someone clicks on the “rates” page, the text visually indicates that you’re on this page (by changing to color to pink or changing the background to pink, whatever). I’ve achieved this effect using php and css, but it’s really clunky and seemingly unnecessary.

Thanks guys,
heinz

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@jogolMar 29.2006 — give your body an id and code your menu as list like this:

[code=html]
<body id="rates">
<ul>
<li id="n-home"><a href="#">home</a></li>
<li id="n-rates"><a href="#">rates</a></li>
<li id="n-about"><a href="#">about</a></li>
</ul>
</body>[/code]

in your css write

[CODE]body#home #n-home { highlight style of "home" here }
body#rates #n-rates { highlight style of "rates" here }
body#about #n-about { highlight style of "about" here }[/CODE]
Copy linkTweet thisAlerts:
@KravvitzMar 29.2006 — No, you either have to hardcode which link points to the current page on each page or use a server-side (PHP, ASP, etc.) or client-side (JavaScript) scripting language to do it. CSS2 does not have that capability.

[url=http://www.thecounter.com/stats/2006/February/javas.php]Keep in mind that some Internet users use a browser that doesn't have JavaScript enabled.[/url]
Copy linkTweet thisAlerts:
@jogolMar 30.2006 — sure you can do it with [B]html & css ONLY[/B]. [URL=http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/]click here[/URL] for a well-known page where it is practised and directly read a more detailed tutorial on how to achieve this.
Copy linkTweet thisAlerts:
@smegilMar 30.2006 — Heres my code bro. I use this code in my design so u hav to customize it.

It has the fix for IE as well and the css in it. U will hav to add your own images.

Kool




<style>

body {

font-family: Geneva, Arial, Helvetica, sans-serif;

}

ul { /* all lists */

padding: 0;

margin: 0;

list-style: none;

}

li { /* all list items */

float: left;

position: relative;

width: 151px;

text-align: center;

list-style-type: none;

}

li ul { /* second-level lists */

display: none;

position: absolute;

left: 0;

margin-top: 0px;

padding-top: 0px;

width: auto;

z-index: 1;

top: 30px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #B6B8BA;

border-right-color: #B6B8BA;

border-bottom-color: #B6B8BA;

border-left-color: #B6B8BA;

}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */

top: auto;

left: auto;

}

li:hover ul, li.over ul { /* lists nested under hovered list items */

display: block;

top: 23px;

}

#nav {

margin-top: 0px;

margin-right: 0px;


}

#content {

clear: left;

}

#navHold {

height: 24px;

margin-top: 0px;

z-index: 1;

text-align: center;

padding-right: 0px;

background-image: url(images/PixelRepeat.jpg);

background-repeat: repeat-x;

width: 760px;

}

#nav li li a {

color: #236EA3;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

}

#nav li li a:hover {

display: block;

background-repeat: repeat-x;

height: 24px;

color: #FFFFFF;

}

#nav a {

text-decoration: none;

}

.DropStyle {

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #B0B3B6;

height: 24px;

background-image: url(images/PixelRepeat.jpg);

background-repeat: repeat-x;

}

.List a {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 24px;

color: #236EA3;

font-weight: bold;

display: block;

background-image: url(images/insetLine.jpg);

background-repeat: no-repeat;

background-position: left;

}

.List a:hover {

display: block;

color: #236EA3;

background-image: url(images/hover.jpg);

background-repeat: no-repeat;

}

.left {

float: right;

}

.topBackground {

background-image: none;

height: 120px;

width: 955px;

}

.right {

float: right;

}

.cellBackGroundRepeat {

background-image: url(images/PixelRepeat.jpg);

background-repeat: repeat-x;

}

.left {

float: left;

margin-top: 2px;

border: 1px solid #666666;

margin-left: 2px;

}

#middle a {

color: #006699;

text-decoration: none;

font-weight: bold;

}

#topHold {

width: 100%;

}

.topLineNav {

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: none;

border-top-color: #D0B26A;

border-right-color: #D0B26A;

border-bottom-color: #D0B26A;

border-left-color: #D0B26A;

border-bottom-style: solid;

}

.logoBackground {

background-image: url(../images/Logo_Brown.jpg);

background-repeat: no-repeat;

background-position: center;

}

.List2 a:hover {

display: block;

background-image: url(images/hover2.jpg);

background-repeat: no-repeat;

color: #236EA3;

}

.List2 a {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #236EA3;
font-weight: bold;
display: block;
background-image: none;
background-repeat: no-repeat;
background-position: left;
border: 1px none #236EA3;
}

.insetBottomMenu {

border-bottom-width: 1px;

border-bottom-style: none;

border-bottom-color: #D0B26A;

height: 24px;

background-image: url(images/InsetDropDownMenu.jpg);

background-repeat: no-repeat;

background-position: bottom;

}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace(" over", "");

}

}

}

}

}

window.onload=startList;



//--><!]]></script>

<link href="topNav.css" rel="stylesheet" type="text/css">

<div id="navHold">



<ul id="nav">

<li class="List2"><a href="default.asp">Home</a></li>
<li class="List"><a href="#">Destination Info</a></li>




<li class="List"><a href="#">Lodges</a>
<ul>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
<li class="DropStyle"><a href="#">Insert Lodges</a></li>
</ul>
</li>

<li class="List"><a href="#">Tours</a> </li>
<li class="List"><a href="#">Contact Us</a></li>
</ul>

</div>
×

Success!

Help @heinz1218 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.20,
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,
)...