Need some help creating a menu

by 6 replies
7
I'm trying to come up with something unique and different from the normal menus out there.

My idea is to have Four round buttons to represent my categories.

Then the idea is to have it that when the visitor scrolls over top of one of them to have it slowly change to a different color. At the same time I'd like to have it make a word appear below it to say what the category is?

Dose anyone have any idea's on how this menu could be created using CSS?

I got lots of other menus but none that do this specifically?

It would also go horizontally and be centered.

I'd even be willing to give 5 bucks Canadian if that helps.
#website design #creating #menu
  • Use ul and li tag to create an menu and give them internal or external css.
  • For $5 (even Canadian) I am not going to tell you. I am way more expensive than that!

    But I will give you the directions for free

    What you want is rollover images in the menu:
    http://en.wikipedia.org/wiki/Rollover_(web_design)
    (a general description of the idea)

    Now that you know the term for it... you can find many web sites providing the code, instructions, tutorials re: how to do it.
    • [1] reply


    • I found the following bit of code but when I try to add a class in front of it, it no longer seems to work.

      ul {color:#000066}
      ul li a {color:#CC0000;}

      ul{
      margin: 0;
      padding: 0;
      font: 13px 'Lucida Grande', Arial, sans-serif;
      list-style-type: none;
      }
      ul li{
      display: inline;
      }
      ul li a{
      text-decoration: none;
      padding: .2em 1em;
      color: #000;
      background-color: #b0f664;
      border:1px solid #8bda35;
      }

      ul li a:hover{
      background-color: #ccf69f;
      border:1px solid #a8e765;
      }





  • You can solve the problem by learning the basics

    WRONG:
    menub.ul li a:hover{background-color: #ccf69f;
    boarder: 1px solid #a8e765;}

    CORRECT:
    .menub ul li a:hover{background-color: #ccf69f;
    boarder: 1px solid #a8e765;}

    In the stylesheet the convention for classes is like this:
    .class-name (notice the period is IN FRONT!)
    for IDs
    #id-name
  • Here are few tutorials, learn these and you can code yourself :

    31 CSS Navigation and Menu Tutorials You Should Practice | DesignBeep

    100 Great CSS Menu Tutorials
    • [ 1 ] Thanks
    • [1] reply
    • Thanks so much, these should help me out quite a bit.
Join the discussion

Next Topics on Trending Feed