1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS vs Javascript for sites menu

Discussion in 'CSS' started by fadetoblack22, Oct 25, 2008.

  1. #1
    Hello, I need to decide whether to use css of javascript for my sites menu.
    SEMrush
    I want to know the advantages/disadvantages of each.

    This is what I have though of so far. Tell me if this is correct:

    1) Css - less code + only load once from css file, but some cache problems in IE.

    2) Java script - works well, but lots of code and loads on every page with preloader?

    thanks.
     
    fadetoblack22, Oct 25, 2008 IP
    SEMrush
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It's the main menu for your page so personally you should really go for CSS as it's most compatiable. Not everyone has JavaScript, infact about 10% of users I think it may be.
    Mobile phones and some workplaces/schools disable JavaScript also. Not to mention it adds additional overhead to CSS coding.

    Obviously the disadvantages with CSS are that your limited with what menu you can actually have, and you can't have transitions/effects although you can add instant hovers with CSS.
     
    wd_2k6, Oct 25, 2008 IP
  3. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Thanks. I don't agree with the 10% of people using javascript though. Its in all modern browsers by default.

    I am looking into the css version. Its for my horizontal main menu.

    I am looking at the use of one image with the normal and hover colours all in one. I don't understand where the rest of the image goes when it it hovered over though: http://wellstyled.com/css-nopreload-rollovers.html

    If it goes up or down with minus pixels, the will it not still be seen?
     
    fadetoblack22, Oct 25, 2008 IP
  4. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #4
    I also want to point out that I want a menu button to be different (active) when I am on the page for that option.

    I'm not sure if that is doable with the current accepted css methods using one image.


    So basically I want a horizontal menu in css that has a hover over image and has an image when the page is active.
     
    fadetoblack22, Oct 25, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    No when you hover over the image you tell it to move the picture.

    So you have something like:

    menu li{ background: (image.gif); left;
    menu li a:hover{ background position: 0 175px;}

    So on hover we tell it to move the background image 175px to the left so the other image shows.

    And you can have a different background, what you do is for the active item you give it a class called current or something, then you style that class inside the CSS to have the active image.
     
    wd_2k6, Oct 25, 2008 IP
  6. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #6
    Thanks for the reply. What I don't get is why you can't see the bg image 175px to the left?

    Is the active image a different one to the image for the a:link and a:hover?
    I was thinking that if the same image is used, then how will it be able to hover at the same time.
     
    fadetoblack22, Oct 25, 2008 IP
  7. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Because the button has a set width and height, so where the background is positioned you can't see it past that width and height.

    Here check my quick example using the background image from the link you gave me:

    It also has a current class like I explained. This is set up for text to appear over the background link, however if you have the text as part of your image, and you want the real text to be hidden behind the image this can also be set-up.
     
    wd_2k6, Oct 25, 2008 IP
  8. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #8
    fadetoblack22, Oct 25, 2008 IP
  9. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yes this is possible, but i'm unsure what you want.

    The link you have posted on the edit, all of the buttons are of the same size.
    Do you want the text to overlap the image, or will the image contain the text so you need the text to be hidden behind the image?

    If you are going to create the text as part of the image then this is possible you just give each individual item a class and specify a width to it.
     
    wd_2k6, Oct 25, 2008 IP
  10. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #10
    Sorry, the edit was just meant to show the vertical arrangement rather than the horizontal arrangement of the different button states.

    I am going to have the text as part of the image, yes.

    thanks
     
    fadetoblack22, Oct 25, 2008 IP
  11. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Yes this can be done, if you provide a picture I can provide you with an example.
    The picture should have the different states underneath one another as in the link you posted.
     
    wd_2k6, Oct 25, 2008 IP
  12. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #12
    fadetoblack22, Oct 25, 2008 IP
  13. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I mean if you create your menu image in photoshop or whatever, and give me the link then I will create the menu for you.

    You should create the image in 3 rows like that image, the first row is all of the buttons in normal state, the second row hover state, and the third row is active state.
     
    wd_2k6, Oct 25, 2008 IP
  14. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #14
    fadetoblack22, Oct 25, 2008 IP
  15. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Where is the actual image you plan to use for your site menu I mean, because your not going to use that image, I assume?
    Anyway here is a quick example based on that image:

    That is what your looking for right? The rollover doesn't look smooth because in the image you have created the text and buttons are slightly misaligned.
     
    wd_2k6, Oct 25, 2008 IP
  16. AnonymousUser

    AnonymousUser Peon

    Messages:
    593
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #16
    as WD_"k6 suggests, CSS, otherwise wen a user has Js turned off youd have to write a alternative.
     
    AnonymousUser, Oct 25, 2008 IP
  17. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #17
    CSS doesn't have cache problems.

    On my portfolio, over 20% of people have Javascript disabled. It's not a matter of whether they have it or not, it's a matter of whether its enabled or not.
     
    rochow, Oct 25, 2008 IP
  18. garrettheel

    garrettheel Peon

    Messages:
    341
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Why not use both and have the javascript used for a dropdown with more items. Then, people who don't have javascript enabled can still use the menu and those who do have the added benefit of more options.
     
    garrettheel, Oct 25, 2008 IP
  19. Sean@WMS

    Sean@WMS Peon

    Messages:
    134
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #19
    You're on the right track with wd_2k6. You definitely want to use CSS rather than JS. You can get all of the effects you are looking for with CSS, and perhaps even more important, spiders will be able to easily read and crawl your CSS menu while this is way less likely with a JS or DHTML fly-out menu.

    It's really not such a big deal whether folks have JS enabled or not, though, so long as they can still get to the primary pages and find navigation deeper in from there.

    Honestly, it's painful for me to imagine a web universe with no JavaScript enabled, but there are increasily dangers for both end-users and site owners . . . . but mostly some folks just freak out of things.
     
    Sean@WMS, Oct 25, 2008 IP
  20. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,327
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    160
    #20
    fadetoblack22, Oct 26, 2008 IP