Navigation menu problem

I have my navigation almost perfected. Only one thing wrong…I want to make the top level menu items unclickable (home, about, projects…), but can’t figure out how.

Somebody wrote this php code for me a while ago, and I’ve just adapted it. Just so you know, I don’t know how to write php.

Any suggestions would be much appreciated.

Thank you! :slight_smile:

To stop the items being clickable, you need to take off the <a href=“...”> </a> around them.

However, the danger of doing that is that some people might not be able to use the drop-down menus for one reason or another. If you don’t allow the top links to be clickable either then they won’t be able to navigate your site at all.

Sorry, I don’t think I was clear enough. I forgot I actually have 2 main nav buttons (home and contact) that are clickable.

The “about”, “services”, “projects”, and “login” buttons do not need links. And maybe it’s not possible using the php code that I have.

This is it:

I just changed the links to <a href=“#”> which is an improvement but cursor still indicates that it’s a link.

Any other suggestions? Thanks.

As Stevie said you need to take off the a not only add a hash to it.

That’s what I tried first. Unfortunately the button disappears.

I removed the link on the “about” button.


As others have said you need to do something like this.

        <div id="nav-bar">
            <ul id="nav">
                <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
                <li><a href="contact.html">Contact</a></li>
            [B]    <li><strong>Login</strong>[/B]
                        <li><a href="login-clients.html">Client Login</a></li>
                        <li><a href="login-staff.html">Staff Login</a></li>
                        <li><a href="login-consultants.html">Consultant Login</a></li>
              [B]  <li><strong>Services</strong>[/B]
                        <li><a href="master.html">Master Planning</a></li>
                        <li><a href="dsa-opsc.html">DSA/OPSC</a></li>
                        <li><a href="programming.html">Programming</a></li>
                        <li><a href="architectural-design.html">Architectural Design</a></li>
                        <li><a href="site-assessment.html">Site Assessment</a></li>
            [B]    <li><strong>Projects</strong>[/B]
                        <li><a href="education.html">Education</a></li>
                        <li><a href="master-planning.html">Master Planning</a></li>
                        <li><a href="medical.html">Medical</a></li>
                        <li><a href="institutional.html">Institutional</a></li>
                        <li><a href="under-construction.html">Under Construction</a></li>
             [B]   <li><strong>About</strong>[/B]
                        <li><a href="philosophy.html">Philosophy</a></li>
                        <li><a href="press.html">Press/News</a></li>
                        <li><a href="client-list.html">Client List</a></li>
                        <li><a href="personnel.html">Personnel</a></li>
                <li><a href="index.html">Home</a></li>

Then give that new element the same styling as the anchor:

#nav li a,[B]#nav li strong [/B]{
    line-height:150%; /* center the text vertically */
    display: block;
    padding-right: 18px;
    padding-left: 18px;
    padding-top: 5px;
    padding-bottom: 5px;

Then set the cursor to default otherwise it looks odd.

[B]#nav li strong {cursor:default}[/B]

However as others have said if javascript is disabled then ie6 users will be unable to navigate your menu. Usually those top level links would go to a subpage where the user could navigate.

If you just want to make the top level links not look like a link then just add a class to them and turn the cursor off.


.cursoroff {cursor:default!important}

<li><a class="cursoroff">Login</a>

I’d suggest span instead of strong, since those should NOT be receiving ANY form of emphasis, but apart from that Paul’s on the money.

Though as mentioned by others, those should remain links so that people for whom that menu doesn’t work there’s normal drilldown navigation.

I’m also seeing a few other issues too – like the uselessly vague “nav” name (every link on a page is navigation, “nav” ends up JUST a little vague!), get rid of the presentational image and unnecessary div#header, div#nav-bar, clearing DIV’s… and that’s before we even TALK about the comments that could not only trip rendering bugs in older browsers (yes, I said COMMENTS) and frankly, you’ve got some really dumb and/or confusing comments in there.

For example:

<!--begin BANNER-->
<div id="banner"></div>

REALLY? Opening a div with the ID banner is the start of a banner? Who’d have thunk it?

<!--begin COLUMN 1-->
<div id="column2">

Uhm, if that’s column 1, why is it’s id called column 2?

<!--end COLUMN 2-->

Not only do we have the “no, </div> means the end of something” routine, it’s placement AFTER the element being closed could land it between floats – tripping the notorious double render and/or disappearing content bugs in IE and the ‘unwanted block-level’ bug in some builds of gecko based browsers.

You’re opening comments are pointless and could trip bugs, your ending comments aren’t pointless, but are wasteful and could trip bugs.


<div id="column1">
<!-- #column1 --></div>

is just as clear and would not have those problems. I know you’re thinking “comments? REALLY?” – it’s something you should be aware of as yes, comments can cause rendering errors, and wasteful comments waste bandwidth.

I’d also suggest swinging a giant axe at the suckerfish nonsnese, write it like a normal HTML menu, and throw PeterNed’s “whatever:hover” at it if you care about IE6- users.

Separating out the CSS into a separate file so you can run mulitple editors to see them side-by-side, and putting it one property per line so it’s legible and you don’t keep redeclaring the same things over and over wouldn’t hurt either.

Yes I was going to suggest span but then I saw that the menu CSS has loads of spans targeted and being a lazy so and so I took the easy route and suggested strong to save changing the css (if indeed it would need changing). A span would be a better choice as you say.:slight_smile: