can someone share with me a link where I can download a free menubar?
I just can't find anything that I can just take and paste in my project.
I have my menu data in DB (not hardcoded in html) and I'm looking for a multi-level(atleast 3 levels) dropdown menu. something like the menubar we have on this forum.
is there a place I can download the php+html code that creates the menu and makes it change depending on what I click (open/hide a sub menu) + css + db file for example?
many thanks!
You probably have to do a little work yourself...
Here is a link to jsfiddle, but you would have to define the html output via php yourself:
http://jsfiddle.net/aCaEG/340/
It uses jquery to create the functionality you see on the right side, and jquery could be changed to fit your needs im sure.
And tweak the CSS.
Hope this gets you in the right direction, there is some code to start with there..
And of course, you need to extract your db data, with a normal select statement. Maybe save it in a function, and output it to your page.
it looks really basic.. and I was looking for a horizontal menu..
I'm surprised that I can't find a code that needs minimum modification for such a common thing..
right now I have something very ugly.. the submenus are created when you click the father menu..
I wonder if usually this is done like this:
run a select sql that gets all the items in menu (all levels) but each level is different div or li.. and hide the sub levels..when someone click on the father item all I need to do is show the sub menu that is already there?
Yeah it is basic, as I said you have to do a little work yourself...
The very first result showing when i googled your question, gave me this link:
http://www.bloggermint.com/2011/06/pure-css3-multi-level-drop-down-navigation-menu/
Try looking into google, they have quite a big database, storing all kinds of information.. :-)
This is pretty close to a finished product, according to what youre looking for
EDIT EDIT EDIT ::: LIVE DEMO HERE:
http://www.bloggermint.com/demos/darknavmenu/
Just use jmenu... It's the industry standard now.
I'll check those out as soon as I can!
thank you both! those bars look like what I need, I just hope they are easy to implement!
It's the industry standard now.
Really?? I reckon it has stiff competition. The new Twitter Bootstrap http://twitter.github.com/bootstrap/components.html for those looking for an alternative to the clunky-looking jQueryUI originals.
There are hundreds of multilevel dropdown menus available.I'm surprised that you couldn't get a hit with some obvious keywords in Google. Here's my first hit:
http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/
About 20 sites following that one - all relevant.
diafol makes a good point with twitter bootstrap... I like the way it handles menus as it is truly responsive.
Now what I've come to believe is the next best solution is to code a very simple drop down box using javascript if the screen size is for your mobile devices... Otherwise you can use jmenu or superfish. They're the two most popular ones.
The following link is what most of the pros do if they're not using bootstrap. Then again the OP may have no interest whatsoever with creating a responsive menu?
Then again the OP may have no interest whatsoever with creating a responsive menu?
Fair one. I wasn't 'dissing' jmenu, just pointing out that there are hundreds of easy-to-use open source solutions out there. Just really surprised that the OP couldn't find a single one.
ok I've decided to try the jmenu and I just can't get it to work!
I downloaded the zip file from here https://github.com/alpixel/jMenu
open the index.php
and I see the menu but level 3 doesn't show!!
for example if you run this file, click on category 1, then on category 1.2, the next level doesn't show!
I really want to make it work, please help!
Well, the demo page: http://www.myjqueryplugins.com/jMenu/demo works perfectly for me.
I have to say, I don't like the styling, but functionally it looks OK. You need to post your code if you want help. Otherwise I'll say "look at line 34 and ensure there's a <li> directly before the <ul>" and you'll be wondering what the hell I'm talking about.
here is the index.php from the zip file I downloaded:
https://raw.github.com/alpixel/jMenu/master/index.php
p.s. the demo works for me too..
Out of curiosity, I downloaded the zip file and ran the index.php. Works perfectly for me.
The first level 2 menu item (under Category 1) gives 6 level 3 options.
The thrid level 2 menu item gives 2 level 3 options.
The second and forth termintate at level 2 - i.e. they do not have level 3 items.
The CSS is shocking as the prompt arrows for next level are almost invisible against the dark background. If you look carefully, one path under the Category 1 goes to level 6 item. All works fine for me.
The confusing part is why the author named his level items by the same name (e.g. 1.2 for each level 2 item under cat1) - this makes following the paths by looking at the html very difficult.
Industry standard. Hmmm.
strange... I downloaded the whole thing again and now it works...
I'm gonna try to implement it again in my proj tomorrow and hopefully it'll work, wish me luck!
and yes I'm gonna make some changes to the css for sure, once I see that it works lol
ok, I figured out why it didn't work yesterday. the menu in index.php doesn't show the 3rd level in Chrome browser!!! (which is wierd cause the demo on the website does work in chrome)
in firefox and IE it's working!
but I need it to work with Chrome too! any advice?
I only use Chrome for day to day work and it worked for me. I don't know what your problem is, but you could try clearing the browser cache.
yeah I don't know what's the deal..it's working on my home computer but not on my work computer.. deleted everything..restarted..and still doesn't work..
Is js fully implemented on your work pc? My school used to have pretty silly security settings.
I must be missing something stupid..nevermind..
implemented another menu..I'm happy with it.
thank you for your help!
Ok. Sorry I couldn't be of more help.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.