1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

how is this nav bar done?

Discussion in 'White Hat SEO' started by soctal, Jun 30, 2009.

  1. soctal

    soctal Regular Member

    Joined:
    Jul 28, 2008
    Messages:
    243
    Likes Received:
    76
    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.
     
  2. Jcsarokin

    Jcsarokin Power Member

    Joined:
    Mar 2, 2009
    Messages:
    718
    Likes Received:
    1,015
    Location:
    Los Angeles / Beverly Hills
    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
     
  3. Grizzy

    Grizzy Senior Member

    Joined:
    Nov 11, 2008
    Messages:
    919
    Likes Received:
    999
    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.
     
  4. soctal

    soctal Regular Member

    Joined:
    Jul 28, 2008
    Messages:
    243
    Likes Received:
    76
    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 good to know,thanks. but how?
     
  5. ruler0fall

    ruler0fall Power Member

    Joined:
    May 17, 2009
    Messages:
    565
    Likes Received:
    263
    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.
     
    • Thanks Thanks x 1
  6. Grizzy

    Grizzy Senior Member

    Joined:
    Nov 11, 2008
    Messages:
    919
    Likes Received:
    999
    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. :)
     
    • Thanks Thanks x 1
  7. soctal

    soctal Regular Member

    Joined:
    Jul 28, 2008
    Messages:
    243
    Likes Received:
    76
    i work mostly in drupal and a little in wp, still barely know enough, especially of php, i will give it a try,thanks