Simple CSS menu

mdshare · 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>

Magictallguy · May 14, 2008

Re: Simple CSS menu

And it's very easy to incorperate into PHP! :)

Magictallguy · 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!

Haydon · 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?

Floydian · August 22, 2008

Re: Simple CSS menu

I'd recommend using Yahoo YUI MenuBar for that.

YUI MenuBar link

POG1 · 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-)

Sign In

Simple CSS menu

Recommended Posts

mdshare

Magictallguy

Magictallguy

Haydon

Floydian

POG1

Join the conversation

Browse

Activity

Hosting