Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to: Make drop down menu from nav?

  • @dwpers

    Participant

    15 years, 3 months ago

    I know somewhat know CSS and HTML, however, I don’t know where to begin making a drop down menu from the page links that show up by default.

    Say if you scroll to the top and see the ‘About’ link, I would like to make a drop down on mouseover for this. Is it possible to do this with BP the way it is using the default theme? Right now that nav is already assigned a class property, so how would one go about doing this?

    When I was making my pages, I saw that you could make them a child to the parent, so if About was my parent and the other sub pages were children, would this help in making the drop down? Or does it not really matter?

    Thanks :)

Viewing 14 replies - 1 through 14 (of 14 total)

  • @peterverkooijen

    Participant

    15 years, 3 months ago

    I’d go for a jQuery drop down menu.

    @dwpers

    Participant

    15 years, 3 months ago

    So, it’s possible to transform the BP navbar (see above one that has Home, About, Blog, Forums, etc) into a drop down?

    Does making a page a child affect this at all? It would be nice if making certain pages children, would create a drop down for you :)….

    @peterverkooijen

    Participant

    15 years, 3 months ago

    Probably. The BP navbar is an unordered list – lu, li etc. – which would be vertical by default if it wasn’t for CSS trickery.

    Most of these jQuery navigation things are based on lu-li as well, so you may be able to find one that works without having to mess with the menu code.

    @dwpers

    Participant

    15 years, 3 months ago

    Cool, I’ll give it a go, thanks for the link. I’ll report back my findings/difficulties/success (i hope)? :D

    @peterverkooijen

    Participant

    15 years, 3 months ago

    Here is a clearer example.

    jQuery comes with WordPress, but remember to change $ to jQuery in the javascript, like this:

    jQuery(document).ready(function(){
    
jQuery('li.headlink').hover(
    
function() { $('ul', this).css('display', 'block'); },
    
function() { $('ul', this).css('display', 'none'); });
    
});

    It’s to prevent clashes with other javascript libraries.

    @dwpers

    Participant

    15 years, 3 months ago

    Thank you :).

    I will try this tonight.

    @takeo

    Participant

    15 years, 3 months ago

    Yah… always best to use unordered lists for navigation. It just makes the most sense semantically speaking. Once you have your navigation being output as nested lists… there are any number of CSS/JS solutions to hide the nested lists and turn them into drop downs. The most lightweight solution is the old tried and true suckerfish menu… which is pure CSS with just a teeny tiny bit of javascript code to make it work in IE. But since jQuery is already included in WordPress… may as well go with something a little more fancy… with a mouseout delay… etc.

    @dwpers

    Participant

    15 years, 3 months ago

    Hmm so I tried to add it on http://www.fanspeak.com but its not aligning properly and its reduced the size of the link ‘buttons’.

    I’ve tried editing the suckerfish css files but I keep breaking it. Anyone know how to align it right underneath the main link and not style it differently than the default style of the theme without breaking it?

    @takeo

    Participant

    15 years, 3 months ago

    Some good resources for learning CSS are w3schools.com, lynda.com, Firebug for Firefox, anything written by Eric Meyer… and if you’re on a Mac… CSSEdit from MacRabbit.

    @peterverkooijen

    Participant

    15 years, 3 months ago

    dwpers, css can be a bitch. My strategy is usually to take everything out and add definitions one by one and see what does what, with a clean working example as reference. Less is often more.

    @dwpers

    Participant

    15 years, 3 months ago

    aye, im gathering that, lol…

    thanks for the help :)

    @mcrustk2

    Participant

    14 years, 8 months ago

    Did you ever solve this?

    I have just come across BuddyPress and got it up and running, Im not a dev, I have exactly the same problem I want two other items to drop down under the ‘About’ page icon ‘Club Details, Our Team’, is there snippits or guides you could point me towards?

    @modemlooper

    Moderator

    14 years, 8 months ago

    https://wordpress.org/extend/plugins/wordpress-css-drop-down-menu/

    @avi-m

    Participant

    14 years, 8 months ago

    dito! Would love a simple solution myself!

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to: Make drop down menu from nav?’ is closed to new replies.

Topic Info

Skip to toolbar