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

Link to comment

Share on other sites

Magictallguy

Link to comment

Share on other sites

Magictallguy

Link to comment

Share on other sites

Haydon

Link to comment

Share on other sites

Floydian

Link to comment

Share on other sites

POG1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Hosting

Marketplace