how is this nav bar done?

soctal

Regular Member
Joined
Jul 28, 2008
Messages
263
Reaction score
80
the menu of this website is so cool,

Code:
http://www.mcclatchydc.com/

as you go over most of the menu titles, it gives the titles/headlines of the current stories within each topic. does anyone know how that is done? thanks

i've been trying to find out for a week now. i even emailed the webmaster of the site, no answer.
 
Are you talking about the dropdown on the top navi bar?

Id say your best bet ( if nobody comes in here knowing off the top of their head) is to google something like "dropdown navigation bar code" or something like that. Should find your answer, or atleast something that will lead you down the right path
 
If you're asking how the drop-down effect is achieved, it looks like your basic css drop-down menu. When the cursor hovers over the first <li> object, the style sheet tells the browser to display the sub-menu coded within the original <li> tag. I didn't go as far as to look at this webmaster's css, but, I imagine the magic happens because of something like this:
HTML:
li:hover ul { display: block; }

As far as how the most current articles are actually coded into each parent <li> tag, that could be done in a variety of different ways.
 
for clarification, i was not asking about the drop down menu, but whats IN the drop down menu, not static titles for the links, but a title or teaser of current topics.

that could be done in a variety of different ways
.

that good to know,thanks. but how?
 
They just fetch the excerpt of the latest post in that category, It's a function of wordpress I think, Or you could use mysql code for it.
 
I don't know what cms that site is using (don't think it's wp tho). I'm not sure if you know much about php (this may not make sense if you don't), but, it's just a matter of having php query mysql for the most recent article titles/links in a specific category and then looping through the results and, at the same time, outputting the corresponding title/link in the form of something like <li><a href="$article['link']">$article['title']</a></li>. This occurs every time the page is loaded (if its dynamic) or when the page is built (if its static).

To do this in wp you just need to read up on The Loop (or maybe there is a plugin I am not aware of). Hope it helps / made sense. :)
 
i work mostly in drupal and a little in wp, still barely know enough, especially of php, i will give it a try,thanks
 
Back
Top