Thread: CSS Menu ?

    #1
  1. webber
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2000
    Location
    San Juan - Argentina
    Posts
    594
    Rep Power
    19

    Talking CSS Menu ?


    Hi ppl...
    Can this menu be done with CSS?

    HOW? any examples?

    Code:
    http://www.the-fifth-hope.org/hoop/
    thanks a lot...
    Enrique Becerra
    CodeIgniter, Joomla & Java Development
    www.itexa.com.ar
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    20
    Originally Posted by kk5st
    Ooooo, thanks for that one Gary.
  6. #4
  7. webber
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2000
    Location
    San Juan - Argentina
    Posts
    594
    Rep Power
    19
    u know guys...
    i got confused seeing the article kk5st posted...
    i got the css file from the website i posted and i got more confused...
    is this lists ?
    Code:
    A:link {
    	COLOR: #e73614; TEXT-DECORATION: none
    }
    A:visited {
    	COLOR: #e73614; TEXT-DECORATION: none
    }
    A:active {
    	COLOR: #e73614; TEXT-DECORATION: none
    }
    A:hover {
    	COLOR: #e73614; TEXT-DECORATION: none
    }
    .nav_red {
    	BACKGROUND: #ff0000
    }
    .nav_register {
    	BACKGROUND: #a3b0b0; CURSOR: hand
    }
    .nav_news {
    	BACKGROUND: #8adbff; CURSOR: hand
    }
    .nav_location {
    	BACKGROUND: #ff4f00; CURSOR: hand
    }
    .nav_travel {
    	BACKGROUND: #507d9b; CURSOR: hand
    }
    .nav_volunteer {
    	BACKGROUND: #bde376; CURSOR: hand
    }
    .nav_speakers {
    	BACKGROUND: #9ad6d7; CURSOR: hand
    }
    .nav {
    	MARGIN-TOP: 0pt; FONT-SIZE: 10px; MARGIN-BOTTOM: 0pt; TEXT-TRANSFORM: uppercase; COLOR: #333333; FONT-FAMILY: Arial,Helvetica
    }
    .normal {
    	MARGIN-TOP: 0pt; FONT-SIZE: 11px; MARGIN-BOTTOM: 0pt; COLOR: #000000; FONT-FAMILY: helvetica, arial, sans-serif
    }
    .normal_white {
    	MARGIN-TOP: 0pt; FONT-SIZE: 11px; MARGIN-BOTTOM: 0pt; COLOR: #ffffff; FONT-FAMILY: helvetica, arial, sans-serif
    }
    .fancy {
    	FONT-WEIGHT: bold; FONT-SIZE: 25px; COLOR: #e73614; LINE-HEIGHT: 30px; FONT-FAMILY: garamond, georgia, serif
    }
    .fancy2 {
    	FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; LINE-HEIGHT: 13px; FONT-FAMILY: garamond, georgia, serif
    }
    .fancy3 {
    	FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #0a1f49; LINE-HEIGHT: 18px; FONT-FAMILY: garamond, georgia, serif
    }
    .subfancy {
    	MARGIN-TOP: 0pt; FONT-SIZE: 11px; MARGIN-BOTTOM: 0pt; TEXT-TRANSFORM: uppercase; COLOR: #e73614; FONT-FAMILY: helvetica, arial, sans-serif
    }
    .wfancy {
    	FONT-WEIGHT: bold; FONT-SIZE: 25px; COLOR: #ffffff; LINE-HEIGHT: 30px; FONT-FAMILY: garamond, georgia, serif
    }
    .wsubfancy {
    	MARGIN-TOP: 0pt; FONT-SIZE: 11px; MARGIN-BOTTOM: 0pt; TEXT-TRANSFORM: uppercase; COLOR: #ffffff; FONT-FAMILY: helvetica, arial, sans-serif
    }
    .header {
    	MARGIN-TOP: 0pt; FONT-WEIGHT: bold; FONT-SIZE: 14px; MARGIN-BOTTOM: 0pt; TEXT-TRANSFORM: uppercase; COLOR: #999999; FONT-FAMILY: helvetica, arial, sans-serif
    }
    .subhead {
    	MARGIN-TOP: 0pt; FONT-SIZE: 11px; MARGIN-BOTTOM: 0pt; TEXT-TRANSFORM: uppercase; COLOR: #333333; FONT-FAMILY: helvetica, arial, sans-serif
    }
    .small {
    	MARGIN-TOP: 0pt; FONT-SIZE: 10px; MARGIN-BOTTOM: 0pt; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica
    }
    i just want to get the effect of that menu... but seems the webmaster put all the menu options inside the css file... (i think thats bad)
    Enrique Becerra
    CodeIgniter, Joomla & Java Development
    www.itexa.com.ar
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    The site you referenced is a poor example of html coding. They use table layout to create the menu. I cannot imagine trying to maintain that PoS. Don't follow their example.

    Study the article I gave you and try the code they use. Use css to modify the appearance. Once you understand what's going on, it will be easy to develop your own versions.
    i just want to get the effect of that menu... but seems the webmaster put all the menu options inside the css file... (i think thats bad)
    Actually, that's where it belongs. You may need to expand your css knowledge base. Even though the site you're trying to emulate uses javascript, the js actually modifies the style values. That's like taking a taxi to cross the street. The :hover pseudo-class and style take you across the street without the cab fare. Google for some tutorials.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo