www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] CSS Only Drop Down Menu Bar

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    10

    resolved [RESOLVED] CSS Only Drop Down Menu Bar

    Hello,

    For 2 weeks now I have been going all over the internet to try and find a code that will allow me to have a simple drop down menu table display below a menu button.

    All im after is a simple CSS function so that I can have the Menu Bar in a Table and each button in a TD. Then control the font size, color etc via CSS and the roll over and have it all just work nice and smoothly but you think I can find a code that will make this happen? Please help

    See image attached of what I am trying to do:

    Menu-Bar.gif
    Attached Images Attached Images

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there falky,

    the use of the "table element" for anything other than the display
    of tabular data is considered to be twentieth century methodology.

    Modern methodology uses the "ul element" for navigational menus.

    Would you like an example that is relevant to your attached image?

    coothead

  3. #3
    Join Date
    Nov 2013
    Posts
    10
    Yes please, I have looked everywhere, even tested a few codes of CSS i found but nothing will let me do what im trying to do with the menu system I have, it also has to be 960px wide which I guess I could put into a table thats 960px and then have all the ul elements but you think i can get this to work haha nope, its just doing my head in.

  4. #4
    Join Date
    Nov 2013
    Posts
    10

    Update

    I might have found a solution from a previous post as I am working on editing their scripts atm, will see how I go and keep you posted

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there falky,


    why are you so reluctant to drop the "table element"
    and use modern methodology instead?


    coothead

  6. #6
    Join Date
    Nov 2013
    Posts
    10
    Ok so I have jumped into CSS Menus lol and glad I did as its a lot easier. I have got a problem though I can't solve on the net and that is how to make it so that if the main menu is class="active" the actual background and text color are the same as if its hovered over, basically so there is no effects and is just an active always hovered over menu.

    As you can see "News" is Active using the class, but I dont know how to get it to change the "background-color" from #0061aa to #e4e4e4 & the text "color" from #e4e4e4 to #0061aa without any of the transition effects, just a way to show the user that they are on that specific page when class="active" is on <li>. I will use PHP script to echo the class="active" code for which ever page they are on but the CSS i cant seem to get it to work please help meee

    CSS Code:
    Code:
    ._css3m{
    	display:none;
    }
    ul#css3menu1{
    	margin: 0;
    	list-style: none;
    	padding: 0;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #0061aa;
    	
    }
    ul#css3menu1 ul{
    	margin: 0;
    	list-style: none;
    	padding: 0;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #0061aa;
    }
    ul#css3menu1 ul{
    	display:none;position:absolute;left:0;top:100%;}
    ul#css3menu1 li:hover>*{
    	display:block;}
    ul#css3menu1 li{
    	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
    ul#css3menu1 li:hover{
    	z-index:1;}
    ul#css3menu1{
    	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
    	*display:inline;}
    * html ul#css3menu1 li a{
    	display:inline-block;}
    ul#css3menu1>li{
    	margin:0;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus{
    	outline-style:none;}
    ul#css3menu1 a{
    	display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#e4e4e4;cursor:pointer;padding:0px 10px 0px 10px;background-color:#0061aa;border-width:0 0 0 0px;border-style:solid;border-color:#0061aa;	-webkit-transition: color .2s ease-in-out;
    	-moz-transition: color .2s ease-in-out;
    	-o-transition: color .2s ease-in-out;
    	-ms-transition: color .2s ease-in-out;
    	transition: color .2s ease-in-out;}
    ul#css3menu1 ul li{
    	float:none;margin:0px 0 0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#0061aa;}
    ul#css3menu1 ul a{
    	text-align:center;padding:0px;background-color:#e4e4e4;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#0061aa;text-decoration:none;	-webkit-transition: color .2s ease-in-out;
    	-moz-transition: color .2s ease-in-out;
    	-o-transition: color .2s ease-in-out;
    	-ms-transition: color .2s ease-in-out;
    	transition: color .2s ease-in-out;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    	background-color:#e4e4e4;border-color:#0061aa;border-style:solid;color:#0061aa;text-decoration:none;
    	}
    ul#css3menu1 span{
    	display:block;overflow:visible;}
    ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    	background-color:#0061aa;background-image:none;color:#e4e4e4;text-decoration:none;}
    HTML Code:
    HTML Code:
    <ul id="css3menu1">
    	<li><a href="#" style="width:66px;height:30px;line-height:30px;">HOME</a></li>
    	<li><a href="#" style="width:68px;height:30px;line-height:30px;">NEWS</a>
    	<ul>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Latest</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Carnival</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Competition</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Archived</a></li>
    	</ul></li>
    	<li class="active"><a href="#" style="width:77px;height:30px;line-height:30px;">TIPPING</a>
    	<ul>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Register</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Ladder</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Prizes</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Terms &amp; Conditions</a></li>
    	</ul></li>
    	<li><a href="#" style="width:65px;height:30px;line-height:30px;">CLUB</a>	<ul>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Events</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Honour Board</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Legends</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Team Of The Decade</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Past Players</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Championship Results</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Committee Members</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Football Staff</a></li>
    		<li><a href="#" style="width:220px;height:30px;line-height:30px;">Membership</a></li>
    	</ul></li>
    	<li><a href="#" style="width:84px;height:30px;line-height:30px;">GALLERY</a>	<ul>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Carnival</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Training Camp</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Events</a></li>
    	</ul></li>
    	<li><a href="#" style="width:65px;height:30px;line-height:30px;">SHOP</a></li>
    	<li><a href="#" style="width:63px;height:30px;line-height:30px;">FANS</a>	<ul>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Facebook</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Twitter</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Wallpapers</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Newsletters</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Sponsor Offers</a></li>
    	</ul></li>
    	<li><a href="#" style="width:94px;height:30px;line-height:30px;">SPONSORS</a>	<ul>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Current Sponsors</a></li>
    		<li><a href="#" style="width:180px;height:30px;line-height:30px;">Sponsor Packages</a></li>
    	</ul></li>
    	<li><a href="#" style="width:90px;height:30px;line-height:30px;">REGISTER</a></li>
    	<li><a href="#" style="width:86px;height:30px;line-height:30px;">CONTACT</a></li>
    </ul>

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there falky,

    try this snippet...
    Code:
    
    .active a {
        background-color:#e4e4e4!important;
        color:#0061aa!important;
      }
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles