INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Help with modifying current navigation menu to add 'drop down' sub-menus ?

Help with modifying current navigation menu to add 'drop down' sub-menus ?

Help with modifying current navigation menu to add 'drop down' sub-menus ?

(OP)
seasoned veterans of CSS, please take a look at this link:


http://www.bsplumbandelectric.co.uk

its a basic html static website hand/hard coded by myself from scratch. Its no where near finished - but the home page is.


initially I had made it work - but for some reason when you hovered over the main menu links the drop down menu would collapse and REMAIN there once you moved your cursor away - this was most bizzare.

I have no idea why this was happening - so i ended up keeping it simple - 1 level menu instead.

if you can make sense of the basic menu css styling - and can understand what i was doing wrong or rather, how I can actually achieve the drop down menu for me current menu - that would be much appreciated.


I would want a drop down menu when the user hovers over 'facilities' , and under that I want 'Pool Tables' , 'Snooker Tables', 'The Diner' and 'The Bar'.

The sub menu links will be of equal size and length of the menu links of the menu themselves.

i wanted the parent menu links to be of same size and to occupy all 60em of the width - i acheived that adding this style:

#nav li {
float: left; width:12em; }

so home, our facilities, etc are all of same length and fill up the entire 60em width nicely.

is this the reason im finding creating the sub menus tricky ?

surely it can't be - the white strip on which the menu links appear are contained in a nav bar holder element i named it that way for ease of understanding - its white in background and as you can see is 100% in width.

its inside this that the nav li resides.

perhaps one must look at my stylesheet for this and begin to realise what the shortcomings may be - either way if anyone can get a basic insight into how I can achieve a basic drop down menu using css under the link 'our facilities' it would be much appreciated.

thanks.

RE: Help with modifying current navigation menu to add 'drop down' sub-menus ?

There is an easier way to achieve what you are looking for. The jQuery plugin allows you to create unlimited menus/sub-menus with very little work involved.

http://www.github.com/nuxy/EZ-Menu

M. Brooks
http://mbrooks.info

RE: Help with modifying current navigation menu to add 'drop down' sub-menus ?

(OP)
Thank you mbrooks... i always believed that one had to hand code that all lol

surely though, for my peace of mind and yours - it would be nice if we COULD ? hand code FROM SCRATCH a complex drop down jQuery menu ? is it done at industry level or do programmers simply use off the shelf code/libraries etc these days ?

RE: Help with modifying current navigation menu to add 'drop down' sub-menus ?

Quote:

hand code FROM SCRATCH a complex drop down jQuery menu

I'm assuming there is a joke in there. One cannot hand code entirely from scratch if they are relying on the existing jQuery library to support it.

The nature of any development is to build off of the work of others. No developer is an island.

RE: Help with modifying current navigation menu to add 'drop down' sub-menus ?

Can you hand code a menu from scratch? Sure you can. Would you want to if there's already something pre-built that can save you time and effort, and does what you want? Probably not.

Hell you could even code it using base CSS and javascript just the same, but it may not be very convenient to do so.

I've always been of the school of thought that, over-reliance on pre-built libraries can lead to very convoluted and hard to maintain site. But there's also the question of how much time you have to build something. There simply many not be enough time or resources to code a menu from scratch.

If there is, coding from scratch will always be a learning experience as you will undoubtedly learn what needs to be done to make something work as you want it.
Its always a good thing to understand how something needs to work before getting a packaged solution.

Personally, I've coded many drop down menus from scratch in my time to fit certain requirements. But its always a question of whether I have the time an resources to do so and if it really is warranted. You also learn to store away pieces of generic code for things like that, so you don't have to start completely from scratch each time.

Usually, Js is only used for special actions.

Such as this menu:
DD Menu with interior images


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Help with modifying current navigation menu to add 'drop down' sub-menus ?

This may help

http://line25.com/tutorials/how-to-create-a-pure-c...
How To Create a Pure CSS Dropdown Menu - Line25

http://dropdownmenugenerator.com/
Drop Down Menu Generator

http://www.noupe.com/css/multilevel-drop-down-navi...
Multilevel Drop Down Navigation Menus: Examples and Tutorials

http://inspiretrends.com/drop-down-menu-tutorials/
35 Drop Down Menu Tutorials in HTML5, jQuery and CSS3

- - -
falcon

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close