How to create a CSS3 Menu using -moz-border-radius « Depot webdesigner – Tutorials and more resources for webdesigner

Email Subscription

How to create a CSS3 Menu using -moz-border-radius

May - 25 - 2010 by Arbaoui Mehdi

Author: Arbaoui Mehdi

Hi, I'm Arbaoui Mehdi. I'm the editor of Depotwebdesigner and Codamaniacs,the Site Manager of both Tutoslinux, and Rabbitemplate. I spend too much time in front of the computer.

Contact Author : support@depotwebdesigner.com

in this example I’ll explain how to create a menu with css that uses the propriety -moz-border-radius.
Demo work only on firefox.

Code Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Radius Menu</title>
</head>
<body>

<div id="menu">
    <ul id="firstmenu">
        <li><a title="" href="#all" class="current">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
        <li><a rel="prints" title="" href="#">Services</a></li>
        <li><a rel="pweb" title="" href="#">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
    </ul>
</div>

<div id="menu">
    <ul id="secondmenu">
        <li><a title="" href="#all">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#" class="current">Projects</a></li>
        <li><a rel="prints" title="" href="#">Services</a></li>
        <li><a rel="pweb" title="" href="#">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
    </ul>
</div>

<div id="menu">
	<ul id="thirdmenu">
        <li><a title="" href="#all">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
        <li><a rel="prints" title="" href="#" class="current">Services</a></li>
        <li><a rel="pweb" title="" href="#">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
	</ul>
</div>

<div id="menu">
	<ul id="fourthmenu">
        <li><a title="" href="#all">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
        <li><a rel="prints" title="" href="#">Services</a></li>
        <li><a rel="pweb" title="" href="#" class="current">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
	</ul>
</div>

</body>
</html>

Code CSS:

#menu {
	float:left;
}
ul#firstmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#firstmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#83129E;
}
ul#firstmenu a.current {
     background-color:#DDDDDD;
}
ul#firstmenu a:hover, ul#firstmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu.jpg");
	color:#FFFFFF;
}

ul#secondmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#secondmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#b12ad4;
}
ul#secondmenu a.current {
     background-color:#B0E137;
}
ul#secondmenu a:hover, ul#secondmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu2.jpg");
	color:#b12ad4;
}

ul#thirdmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#thirdmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#E227B6;
}
ul#thirdmenu a.current {
     background-color:#B0E137;
}
ul#thirdmenu a:hover, ul#thirdmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu3.jpg");
	color:white;
}

ul#fourthmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#fourthmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:black;
}
ul#fourthmenu a.current {
     background-color:#B0E137;
}
ul#fourthmenu a:hover, ul#fourthmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu4.jpg");
	color:black;
}

Share and Enjoy:

Tags:clean, css, css3, html, tools, Tutorials, web design, webdesign, xhtml

Discussion 8 Comments

Learnphp says:

June 4, 2010 at 5:14 am

To learn PHP, mysql, ajax, javascript, html, jquery, with advanced concepts , you can visit http://advancedphptutorial.blogspot.com

Reply
sunil kumar patro says:

January 13, 2011 at 9:05 am

It inspire me to make my new own menu

Reply
muhammad arifin says:

July 30, 2011 at 3:47 am

it not work in chrome? why

Reply
freemh says:

July 30, 2011 at 8:38 pm

Yes, it does not work on Google Chrome because it’s a property that only works on mozilla.

Reply