A2JC4life Posted February 24, 2010 Report Share Posted February 24, 2010 I hope this is the right place to post this; I'm assuming that most PHP users know CSS, but not necessarily the other way around. I'm pretty new to PHP and to CSS, although I have a fair amount of familiarity with HTML. I'm working on designing a WordPress template, and I think I have most of it written okay. (I haven't written the actual style sheet for my new template yet, but I've been playing with parts and pieces in other template's sheets to learn what they do.) There's one thing I'm still super-stuck on, though. I want a navigation bar that displays only the top-level pages, but puts the child pages in drop-downs when you hover over them. I understand the basic concept of creating the hover options in CSS, placing the "non-hovered" options off-page with negative numbers to make them invisible, etc. But I cannot seem to grasp how to integrate the CSS with the HTML produced by Wordpress's wp_list_pages function. How do I tell the CSS which "tier" it's working with, if I am not producing the HTML to add classes? This is a key part of my layout design, and I just can't seem to wrap my head around it. Quote Link to comment Share on other sites More sharing options...
Susie Posted February 24, 2010 Report Share Posted February 24, 2010 Basically what you need to do is implement something like the suckerfish/superfish menus. Really, it has nothing to do with PHP. It's javascript and CSS. Here are some links to get you started: Here's a WordPress plugin that you can purchase to easily create the drop downs: http://pixopoint.com/products/suckerfish_css/ http://users.tpg.com.au/j_birch/plugins/superfish/ And then once you have the drop downs working, you would just select the page's parent in the WordPress admin to make it drop down from the main menu item. Quote Link to comment Share on other sites More sharing options...
A2JC4life Posted February 24, 2010 Author Report Share Posted February 24, 2010 Not all of those drop-downs are javascript-based, though. There are pure CSS versions, and they don't require plugins. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 24, 2010 Report Share Posted February 24, 2010 There are pure CSS versions, and they don't require plugins. There are pure CSS versions, but you need a little bit of javascript to add support for IE6 since it doesn't support the :hover property on anything other than links. The superfish jquery plugin (Susie linked to it above) is the one I've had the most success with in the past. It's essentially a pure CSS based dropdown, with a bit of javascript added for IE6 support and minor visual effects. This is the non-jquery based version: http://www.alistapart.com/articles/dropdowns Quote Link to comment Share on other sites More sharing options...
A2JC4life Posted February 24, 2010 Author Report Share Posted February 24, 2010 Got it (I think); thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.