mdshare Posted April 19, 2008 Posted April 19, 2008 This is a simple CSS menu which could change the look of your website a lot As you see when hoovering over it changes the bg area of the link this is really basic but should be enough to play with <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:12px;} #vertmenu { font-family: Arial, Helvetica, sans-serif, Tahoma; font-size: 100%; width: 160px; padding: 0px; margin: 0px; } #vertmenu h1 { display: block; background-color:#FF9900; font-size: 100%; padding: 3px 0 5px 3px; border: 1px solid #000000; color: #333333; margin: 0px; width:159px; } #vertmenu ul { list-style: none; margin: 0px; padding: 0px; border: none; } #vertmenu ul li { margin: 0px; padding: 0px; } #vertmenu ul li a { font-size: 100%; display: block; border-bottom: 1px dashed #C39C4E; padding: 5px 0px 2px 4px; text-decoration: none; color: #666666; width:160px; } #vertmenu ul li a:hover, #vertmenu ul li a:focus { color: #000000; background-color: #eeeeee; } </style> </head> <body> <div id="vertmenu"> <h1>Menu items</h1> <ul> [*][url="#"]Item 1[/url] [*][url="#"]Item 2[/url] [*][url="#"]Item 3[/url] [*][url="#"]Item 4[/url] [*][url="#"]Item 5[/url] [*][url="#"]Item 6[/url] [/list] </div> Menu Demo Code <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:12px;} #vertmenu { font-family: Arial, Helvetica, sans-serif, Tahoma; font-size: 100%; width: 160px; padding: 0px; margin: 0px; } #vertmenu h1 { display: block; background-color:#FF9900; font-size: 100%; padding: 3px 0 5px 3px; border: 1px solid #000000; color: #333333; margin: 0px; width:159px; } #vertmenu ul { list-style: none; margin: 0px; padding: 0px; border: none; } #vertmenu ul li { margin: 0px; padding: 0px; } #vertmenu ul li a { font-size: 100%; display: block; border-bottom: 1px dashed #C39C4E; padding: 5px 0px 2px 4px; text-decoration: none; color: #666666; width:160px; } #vertmenu ul li a:hover, #vertmenu ul li a:focus { color: #000000; background-color: #eeeeee; } </style> </head> <body> <div id="vertmenu"> <h1>Menu items</h1> <ul> [*][url="#"]Item 1[/url] [*][url="#"]Item 2[/url] [*][url="#"]Item 3[/url] [*][url="#"]Item 4[/url] [*][url="#"]Item 5[/url] [*][url="#"]Item 6[/url] [/list] </div> Quote
Magictallguy Posted May 14, 2008 Posted May 14, 2008 Re: Simple CSS menu And it's very easy to incorperate into PHP! :) Quote
Magictallguy Posted June 3, 2008 Posted June 3, 2008 Re: Simple CSS menu If you're using MC Codes v2 <?php include(dirname(__FILE__) . '/globals.php'); ?> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:12px;} #vertmenu { font-family: Arial, Helvetica, sans-serif, Tahoma; font-size: 100%; width: 160px; padding: 0px; margin: 0px; } #vertmenu h1 { display: block; background-color:#FF9900; font-size: 100%; padding: 3px 0 5px 3px; border: 1px solid #000000; color: #333333; margin: 0px; width:159px; } #vertmenu ul { list-style: none; margin: 0px; padding: 0px; border: none; } #vertmenu ul li { margin: 0px; padding: 0px; } #vertmenu ul li a { font-size: 100%; display: block; border-bottom: 1px dashed #C39C4E; padding: 5px 0px 2px 4px; text-decoration: none; color: #666666; width:160px; } #vertmenu ul li a:hover, #vertmenu ul li a:focus { color: #000000; background-color: #eeeeee; } </style> </head> <body> <div id="vertmenu"> <h1>Menu items</h1> <ul> [*][url="#"]Item 1[/url] [*][url="#"]Item 2[/url] [*][url="#"]Item 3[/url] [*][url="#"]Item 4[/url] [*][url="#"]Item 5[/url] [*][url="#"]Item 6[/url] [/list] <ul> <? if($ir['donatordays > 0) { echo ' [*][url="#"]Donator 1[/url] [*][url="#"]Donator 2[/url] [*][url="#"]Donator 3[/url]'; } if($ir['user_level'] > 1) { echo ' [*][url="#"]Staff 1[/url] [*][url="#"]Staff 2[/url] [*][url="#"]Staff 3[/url] '; } ?> [*][url="#"]Item 7[/url] [/list] </div> And so on :P It's actually quite simple.. You must experiment! Experiment I tell you! Quote
Haydon Posted August 22, 2008 Posted August 22, 2008 Re: Simple CSS menu how would u be going about changing that so when u click on the menu it drops down like a drop down menu but with the arrow and only when u click? wat code would u neeD? Quote
Floydian Posted August 22, 2008 Posted August 22, 2008 Re: Simple CSS menu I'd recommend using Yahoo YUI MenuBar for that. YUI MenuBar link Quote
POG1 Posted August 22, 2008 Posted August 22, 2008 Re: Simple CSS menu CSS menus such as this 1 look so much "smoother". The only thing is when you click a link a border appears around the area. For my links on my sites i put a onfocus event onFocus="if(this.blur)this.blur()" 8-) Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.