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

Navigation Bar

Discussion in 'Website Design Forum:' started by Smuj56, Apr 20, 2011.

  1. Smuj56

    Smuj56 New Member

    Hey folks.

    need some quick Advice on navigation bars.
    i make web designs in photoshop and put them into dreamweaver then make Divs ect ect..

    my question is, do you make navagation bars in photoshop and then slice them up, and if yes how do you make a navigation bar go into a already made template with a div space ready for it to be put in ?
    if no do you make them in flash ?

    iv tried looking on google and watching videos but not much help.

    Thanks for your help peeps :icon_notworthy:
     
  2. Corrosive

    Corrosive Moderator Staff Member

    If you are making navigation in HTML the semantic way of doing it is to use an unordered list of links. There are loads of examples at; Listamatic: one list, many options - Using CSS and a simple list to create radically different list options. If you want to use images/rollovers for menus then check out the CSS Sprite Technique; A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death.

    Flash for menus is OK as long as you offer an HTML alternative for non-flash devices such as iPads.

    Hope that helps.
     
  3. Smuj56

    Smuj56 New Member

    Hey Corrosive thanks for your time, I had a look at the list info. and i understand it.

    so how would i take an image of a nav bar i make on photoshop and put it into the list items the way it is on photoshop if that makes sence, ( yes im a rookie :p )

    i made a quick nav image so say i sliced this into parts ... if you can help me understand how i put this into lists for a navigation that would be a great help.

    [​IMG]

    thanks for your help

    Adam
     
  4. Corrosive

    Corrosive Moderator Staff Member

    Before I dive into this, how much do you understand about CSS?
     
  5. Smuj56

    Smuj56 New Member

    Im Fairly new to CSS as my college tutor dosnt teach it just now.
     
  6. Corrosive

    Corrosive Moderator Staff Member

    <rant>Excuse me? Where did they dig him up from? 1996?? That is disgraceful!</rant>

    Anyhoo, you'll probably have to do some background reading as well (oh and maybe change college courses).

    The way I'd tackle that menu is to create an unordered list in HTML;

    Code:
    <ul id=nav>
    <li>Home</li>
    <li>About Me</li>
    <li>Gallery</li>
    <li>Services</li>
    <li>Contact Me</li>
    </ul>
    
    Then remove the text from your nav bar image so you are left with just the background. Set that image as the background to the nav id with CSS.

    Display the li tags inline so that they line up next to each other (default is display: block;) and then use the link pseudo classes (link, visited, hover, active) to set the link colour text as green and no underline (default is blue and underlined). Then set a rollover colour on hover and active.

    Set some margin and padding on the li tags so they space out nicely and you are done.

    Before doing much more you need to get a really good grasp of how to use CSS and HTML to create a website. If your school won't teach you then get on W3 and do some reading/playing/learning; W3Schools Online Web Tutorials

    Let us know how you progress.
     
  7. sweetums

    sweetums Member

  8. djb

    djb Member

  9. Smuj56

    Smuj56 New Member

    Thanks for all your replies.

    will take a look at this video for css just now.
    and will also look into the unordered list method.

    David thanks for your idea haha but i need to understand how to do it, if i ever need a nav bar thats dosnt have to be important i know where to look now ;) cheers haha.

    Adam
     
  10. Corrosive

    Corrosive Moderator Staff Member

    Nice one Adam. That's exactly the right attitude to have if you are going to conquer web design.
     
  11. byronc

    byronc Member

    the above is ok but if you want more than just text that changes color when hovering your mouse you will have to create at least two images for each menu item..?
     
  12. Corrosive

    Corrosive Moderator Staff Member

    I'd always recommend one big image for rollovers. The menu bar non-over above and the over state below. Then use the CSS 'Sprites' technique to create the rollovers with background positioning. That way you avoid javascript (in case the viewer has it switched off) and you can still offer HTML alternatives for the text using 'Phark' image replacement.
     

Share This Page