Please help with CSS menu navigation.

[Mark_H]

Hi
I hope that some one can help me.
I am trying to develop a CSS based cross browser navigation and my aim is to have a ‘Search’ link which when clicked will open up a popup text box allowing the user to enter their search criteria, very similar to the method used at webdeveloper.com
Given that at least 10% of Internet users have JavaScript disabled for security reasons, it would be handy if the navigation menu could be developed with pure CSS only.
If someone could demonstrate how this could be achieved then I would be very grateful indeed.

[KDLA]

Take a look at this: http://projectseven.com/tutorials/navigation/auto_hide/

KDLA

[Mark_H]

Take a look at this: http://projectseven.com/tutorials/navigation/auto_hide/

KDLA

Thank you for your help, I will take a look at this site.

[webnewbieugh]

I followed the tutorial I don't understand how to make the list items work as links to the pages??


<li><a class="trigger" href="#">Software</a>
<ul>
<li><a href="#">MS Word</a></li>
<li><a href="#">MS Excel</a></li>
<li><a href="#">MS Other</a></li>
<li><a href="#"></a></li>
</ul>
</li>

In this example, the word Software appears as the main link, and a list appears that offers Word, Excel but those words do not link to a page about Word or Excel they just list the words??? AM I missing a step?

Thank you for the tutorial it looks very nice and seems to work great if I figure this last part out. Thanks to all!

[KDLA]

You need to put the link addresses in -- you currently have <a href="#"> - which takes you nowhere.

[Mark_H]

I followed the tutorial I don't understand how to make the list items work as links to the pages??

<li><a class="trigger" href="#">Software</a>
<ul>
<li><a href="#">MS Word</a></li>
<li><a href="#">MS Excel</a></li>
<li><a href="#">MS Other</a></li>
<li><a href="#"></a></li>
</ul>
</li>


Whenever you create a link using "#" you are informing the browser to display a 'dead link' which will not link to any specific web page.
You need to enter the location of the web page that you wish to link to in between the quotes using either a relative URL, such as <a href="yourfile.doc">A link to webnewbieughs file</a> or using an absolute URL such as <a href="http://www.webdeveloper.com/">A link to webdeveloper.com</a>
An absolute URL is used to specify a destination document residing on a different WWW server.