courdephilemon: CSS DROPDOWN MENU

bonjour . ce poste montre comment faire un menu stylE acec sous menu.
remarquez la section css ...
et commentez

<html>
<head>
<title>JOUR5 : creation des menu html</title>


<style type="text/css">
ul#css3menu0,ul#css3menu0 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu0 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
ul#css3menu0 li:hover>*{
display:block;}
ul#css3menu0 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu0 li:hover{
z-index:1;}
ul#css3menu0{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
*display:inline;}
* html ul#css3menu0 li a{
display:inline-block;}
ul#css3menu0>li{
margin:0;}
ul#css3menu0 a:active, ul#css3menu0 a:focus{
outline-style:none;}
ul#css3menu0 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#222222;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu0 ul li{
float:none;margin:10px 0 0;}
ul#css3menu0 ul a{
text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu0 li:hover>a,ul#css3menu0 li a.pressed{
background-color:#61a700;border-color:#C0C0C0;border-style:solid;color:#333;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu0 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu0 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu0 > li.switch{
display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#css3menu0 > li.switch:before{
content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#000;-moz-box-shadow:0 8px #000, 0 16px #000;-webkit-box-shadow:0 8px #000, 0 16px #000;box-shadow:0 8px #000, 0 16px #000;}
ul#css3menu0 > li.switch:hover:before{
background:#333;-moz-box-shadow:0 8px #333, 0 16px #333;-webkit-box-shadow:0 8px #333, 0 16px #333;box-shadow:0 8px #333, 0 16px #333;}
.c3m-switch-input{
display:none;}
ul#css3menu0 li:hover>a,ul#css3menu0 li > a.pressed{
background-color:#61a700;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#333;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu0 ul li:hover>a,ul#css3menu0 ul li > a.pressed{
background-color:#424542;background-image:none;color:#6bd600;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu0 li.topfirst>a{
border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu0 li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}
@media screen and (max-width: 768px) {
ul#css3menu0 > li {
position: initial;}
ul#css3menu0 ul .submenu,ul#css3menu0 li > ul {
left: 0; right:auto; top: 100%;}
ul#css3menu0 .submenu,ul#css3menu0 ul,ul#css3menu0 .column {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
@media screen and (max-width: 225px) {
ul#css3menu0 {
width: 100%;}
ul#css3menu0 > li {
display: none; position: relative; width: 100% !important;}
ul#css3menu0 > li.switch,.c3m-switch-input:checked + ul#css3menu0 > li + li {
display: block;}
ul#css3menu0 > li.switch > label { position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}}
</style>



</head>

<body>

<table align="center" bgcolor="#fafafa" cellpadding="10" cellspacing="10">
<tr>
<td>


<ul id="css3menu0" class="topmenu">

<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
<li class="topfirst"><a href="#" title="hom page" style="height:20px;line-height:20px;"><img src="about_files/css3menu0/home.png" alt=""/>Home</a></li>

<li class="topmenu"><a href="#" style="height:20px;line-height:20px;"><img src="about_files/css3menu0/service.png" alt=""/>About </a></li>

<li class="toplast"><a href="#" style="height:20px;line-height:20px;"><span><img src="about_files/css3menu0/samples.png" alt=""/>services</span></a>

<ul>

<li><a href="#">project consultancy</a></li>

<li><a href="#">computer maintenance</a></li>

<li><a href="#">web design</a></li>

</ul></li>

</ul>


</td>

<tr>
<td bgcolor="#eee">
<h1>A propos de nous</h1>
<p>Le contenu du site peu aller ici</p>
<p>Le contenu du site peu aller ici</p>
<p>Le contenu du site peu aller ici</p>
<p>Le contenu du site peu aller ici</p>

</td>
</tr>
<tr>
<td >
<img src="welcome.jpg">
<p>mot de bienvenu</p>
<p>Le contenu du site peu aller ici</p>
</td>
</tr>
</tr>

</table>

</body>
</html>

1 comment:

Unknown18 March 2015 at 10:55
vous remarquerez que le contenu css est un peu vaste ce qui ne facilite pas la productivitE pour un developeur.
sur ce fait voici un lien pour telecharger un logiciel qui se charge de design des menus css proffessionels. telechrgez et nous continuons apres a explorer le logiciel
http://css3menu.com/download/css3menu-setup.zip?utm_source=free_downl_win&utm_medium=email&utm_campaign=css3_downl_link

Wednesday, 18 March 2015

CSS DROPDOWN MENU

1 comment: