Please help with CSS menu navigation.

@Mark_HSep 14.2006

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.

to post a comment

CSS

@KDLASep 14.2006 — #Take a look at this: http://projectseven.com/tutorials/navigation/auto_hide/

KDLA

@Mark_HauthorSep 15.2006 — #Take a look at this: http://projectseven.com/tutorials/navigation/auto_hide/

KDLA[/QUOTE]

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

@webnewbieughSep 15.2006 — #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!

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

@Mark_HauthorSep 15.2006 — #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>
[/QUOTE]

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.

Please help with CSS menu navigation.

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Please help with CSS menu navigation.

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴