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 change floating div's width to fill all the space they occupy?

    Show div on radio button check using JS fallback

    How to simulate nonstoparagraphing in HTML/CSS?

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How can i make an icon blink using CSS/javascript/jquery [duplicate]

    how to align buttons in css/html in one line horizontally?

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How to use global variables in CSS-Modules?

    how to simulate mouse hover on image in css

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    How to put an image at the left side of text without putting the image into css

    JQuery - show/hide rows and manipulate css

    How to add event handlers to DIVS with CSS classes containing a particular string?

    Show 100% of background

    How to draw grid around irregularly arranged web elements?

    How do i make div go under another div making columns

    How to include a non-standard font-face in azure?

    How can I use the HTML data attribute in CSS as a property? [duplicate]

    How can I make a fixed div JUMP when scrolling?

    How to select two elements with “> span” in CSS?

    How to give a css code for combined classes in HTML [duplicate]

    How to show only the top portion of an image with CSS?

    How to place text/content below Navbar in CSS/HTML

    How should a graphic designer learn web design? [closed]

    How to set a CSS selector for links ( a Tag ) for a Class

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

    How to style easypiechart using CSS?

    How do you create different CSS for dynamically generated elements?

    How to combine several hover elements in JS/Jquery

    how to use .css to add an address to the end of every .html page?