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

[c0deM0nK424]

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.

 

[mbrooks]

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

 

[c0deM0nK424]

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 ?

 

[spamjim]

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.

 

[vacunita]

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

 

[navyfalcon]

This may help

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

How To Create a Pure CSS Dropdown Menu - Line25

http://dropdownmenugenerator.com/

Drop Down Menu Generator

http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html

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