How would you code this: The SO Menu [closed]


Tags: javascript,html,css,ajax

Problem :

I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and question how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)

What are some straight forward or creative ways you could code the SO Menu...

Stackoverflow logo | Questions | Tags | Users | Badges | Unanswered | SPACE | Ask Question

  • Would you use a simple table (I know people harp on them as being bad, but remember I'm a noob)?
  • Would it be wise to use CSS relative positioning? Or is that bad considering different browsers implement this differently?
  • Could you use JQuery to implement this easily? Or GWT?
  • The code under the hood (and shown under this question) shows this menu as an unordered list, but I thought unordered lists are typically vertical and look like more like this list of questions I'm posting. How is the <ul> element being used as a menu in this case?

    logo homepage

        <div id="hmenus">
            <div class="nav">
                <ul>
                    <li class="youarehere"><a href="/questions">Questions</a></li>
                    <li><a href="/tags">Tags</a></li>
                    <li><a href="/users">Users</a></li>
                    <li><a href="/badges">Badges</a></li>
    

Thanks in advance for all your help! You were more than helpful in the last, similarly structured question I asked. I really understood the concepts I've been reading about much much better after reading your responses :)



Solution :

I would write it something like this (assuming Questions is the current page):

<div class="nav">
    <ul> 
        <li class="youarehere"><a href="/questions">Questions</a></li> 
        <li><a href="/tags">Tags</a></li> 
        <li><a href="/users">Users</a></li> 
        <li><a href="/badges">Badges</a></li> 
        <li><a href="/unanswered">Unanswered</a></li> 
    </ul> 
</div>

Then I would use CSS somewhat like this:

Note the float: left; on the .nav li style. That is what makes the list horizontal.

.nav
{
    float: left;
    font-size: 125%;
}
.nav ul
{
    margin: 0;
}
.nav li
{
    background: #777;
    display: block;
    float: left;
    margin-right: 7px;
}
.nav .youarehere
{
    background: #f90;
}
.youarehere a
{
    color: #fff;
}
.nav li:hover
{
    background-color: #f90;
}
.nav a
{
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 6px 12px 6px 12px;
    text-decoration: none;
}

Okay, to be honest I wouldn't do it exactly like this... I would probably prefer to skip the <div> element and put id="nav" on the <ul> element... Feels more semantic that way.


    CSS Howto..

    How to get CSS selectors to work in the Developer Tools for Chrome 17?

    How to do fade-in and fade-out with JavaScript and CSS

    How do I convert a text to css hex value?

    How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?

    How to limit width of

    -

    tag by length of content

    How can I create two columns of text next to each other using CSS?

    Bootstrap - How to make text wrap around an image on small devices?

    How do I vertically center an img in a div?

    Navbar on left of page, how to let content resize to match screen size?

    How do you style an android app?

    How can I add a fixed sidebar to a web page?

    How to override css attribute-only style

    How to close the menu after click third layer menu item

    How to make sure my css overlay is on top at any site?

    How to Make A Fancy Arrow Using CSS?

    How do I create a pattern overlay in CSS

    How to change div border automatically when more children are added to it

    How to remap CSS shortcut key in Mac Bluefish text editor

    How to parse xmlwebservice in phonegap

    How to convert SVG CSS animation to pure JS code

    How to move Woocommerce Description tab below review tab

    How to disable css Animation keyframes in opera?

    How to make a smooth transition for css controlled by jQuery?

    ML - CSS How to align correctly a 'required' asterisk before la form label with the label text?

    How to select nth child of specific tag with css?

    how to custmize font awasome icons using cheat sheet in css?

    how to get the site to not collapse with css

    How to change font of select list items in the drop down

    How to block CSS and js file loading in Google Blogger template?

    How to right align a div containing a form in another div?