Extrem Tutorials
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Extrem TutorialsConectare

Peste 500 tutoriale in limba romana.


3 meniuri simple cu ajutorul CSS-ului

power_settings_newConectați-vă pentru a răspunde

23012014
3 meniuri simple cu ajutorul CSS-ului

Salut sunt mr.franta si astazi v-am pregatit un meniu simplu si foarte atragator,asta fiind parerea mea cel putin.
Dificultatea acestui meniu este foarte redusa pot sa spun ca este chiar simplu.
Previzualizare live [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Previzualizare live 2
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Daca acest meniu va place,apasati pe butonul like
Uitati si codul

Cod:


<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:90px;
background-color: #dddddd;
box-shadow: 0px 0px 1px black;
}


div.orizontal a:link, div.orizontal a:visited {
font-weight: bold;
font-size: 12px;
font-family: tahoma;
color: #333;
text-align: center;
padding: 4px;
text-decoration: none;
border-top: 1px solid #d2d2d2;

border-bottom: 3px solid #B72801;
box-shadow: 0px 0px 15px black;

background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(233,233,206,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */


}


div.orizontal a:hover{
background: rgb(181,76,50); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(181,76,50,1) 0%, rgba(183,40,1,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,76,50,1)), color-stop(100%,rgba(183,40,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b54c32', endColorstr='#b72801',GradientType=0 ); /* IE6-9 */

border-bottom: 3px solid brown;
text-shadow: 0px 0px 7px white;
color: white;
}

div.orizontal a.hover{
background: rgb(181,76,50); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(181,76,50,1) 0%, rgba(183,40,1,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,76,50,1)), color-stop(100%,rgba(183,40,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(181,76,50,1) 0%,rgba(183,40,1,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b54c32', endColorstr='#b72801',GradientType=0 ); /* IE6-9 */

text-shadow: 0px 0px 7px white;
color: white;
</style>
</head>

<body>
<div class="orizontal">

<ul>
<li><a href="#">Link</a></li>
<li><a class="hover" href="#">Acasa</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>


</body>
</html>



Meniu 2 tutorial pas cu pass

html

Cod:

<div class="menu">
   
   <ul>
      <li>
         <a href="#" class="verde">verde</a>
      </li>
      <li>
         <a href="#" class="rosu">rosu</a>
      </li>
      <li>
         <a href="#" class="roz">roz</a>
      </li>
      <li>
         <a href="#" class="alb">alb</a>
      </li>
      <li>
         <a href="#" class="portocaliu">portocaliu</a>
      </li>
      <li>
         <a href="#" class="mov">mov</a>
      </li>
   </ul>
</div>
 <br />





css


Cod:






div.menu ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}


div.menu li
{
float:left;
margin-left: 5px;
padding: 2px;
}



div.menu a
{
padding-top: 4px;
border: 1px solid #c9c9c9;
display:block;
width:80px;
background-color:#dddddd;
  color: #EDEDED;
  text-decoration: none!important;
  text-align: center;
  text-transform: italic;
  font-weight: 600;
  font-size: 12px;
  font-family: tahoma;
min-height: 22px;
  box-shadow: 0px 0px 2px white inset;

  text-shadow: 0px 0px 2px black;
}

div.menu a:link{
background: gray}


div.menu a.verde{
  background: rgb(143,200,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,200,0,1) 0%, rgba(143,200,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(143,200,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#8fc800',GradientType=0 ); /* IE6-9 */;

  }
  
  div.menu a.rosu{
  background: rgb(255,26,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,26,0,1) 0%, rgba(255,26,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(255,26,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1a00', endColorstr='#ff1a00',GradientType=0 ); /* IE6-9 */
}
  
    div.menu a.alb{
background: rgb(254,255,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */
 color: #222;
  text-shadow: 0px 1px 2px white;}
  
  
      div.menu a.roz{background: rgb(255,0,132); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,0,132,1) 0%, rgba(255,0,132,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,132,1)), color-stop(100%,rgba(255,0,132,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ff0084',GradientType=0 ); /* IE6-9 */
}
  
  
  div.menu a.portocaliu{
  background: rgb(255,168,76); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
}
  
  
  div.menu a.mov{
background: rgb(229,112,231); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(229,112,231,1) 0%, rgba(200,94,199,1) 47%, rgba(168,73,163,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,112,231,1)), color-stop(47%,rgba(200,94,199,1)), color-stop(100%,rgba(168,73,163,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */
}
  
  
  
  div.menu a.alb:hover{
  background: rgb(233,233,206); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(233,233,206,1) 0%, rgba(252,255,244,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,233,206,1)), color-stop(100%,rgba(252,255,244,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9ce', endColorstr='#fcfff4',GradientType=0 ); /* IE6-9 */

  }
    div.menu a.verde:hover{background: rgb(182,224,38); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(182,224,38,1) 0%, rgba(118,221,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(182,224,38,1)), color-stop(100%,rgba(118,221,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(182,224,38,1) 0%,rgba(118,221,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(182,224,38,1) 0%,rgba(118,221,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(182,224,38,1) 0%,rgba(118,221,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(182,224,38,1) 0%,rgba(118,221,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#76dd00',GradientType=0 ); /* IE6-9 */

  }
    div.menu a.rosu:hover{
  background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

  }
    div.menu a.portocaliu:hover{
  background: rgb(255,103,15); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,103,15,1) 0%, rgba(255,93,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,103,15,1)), color-stop(100%,rgba(255,93,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,103,15,1) 0%,rgba(255,93,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,103,15,1) 0%,rgba(255,93,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,103,15,1) 0%,rgba(255,93,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,103,15,1) 0%,rgba(255,93,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff670f', endColorstr='#ff5d00',GradientType=0 ); /* IE6-9 */

  }
    div.menu a.roz:hover{
background: rgb(251,131,250); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(251,131,250,1) 0%, rgba(231,126,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,131,250,1)), color-stop(100%,rgba(231,126,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(251,131,250,1) 0%,rgba(231,126,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(251,131,250,1) 0%,rgba(231,126,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(251,131,250,1) 0%,rgba(231,126,234,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(251,131,250,1) 0%,rgba(231,126,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e77eea',GradientType=0 ); /* IE6-9 */
  }
  
  
  div.menu a.mov:hover{
  background: rgb(169,87,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(169,87,214,1) 0%, rgba(142,41,196,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,87,214,1)), color-stop(100%,rgba(142,41,196,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(169,87,214,1) 0%,rgba(142,41,196,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(169,87,214,1) 0%,rgba(142,41,196,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(169,87,214,1) 0%,rgba(142,41,196,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(169,87,214,1) 0%,rgba(142,41,196,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a957d6', endColorstr='#8e29c4',GradientType=0 ); /* IE6-9 */

  }
  






meniu 3 html

Cod:




 
<div class="menu2">
   
   <ul>
      <li>
         <a href="#" class="verde2">verde</a>
      </li>
      <li>
         <a href="#" class="rosu2">rosu</a>
      </li>
      <li>
         <a href="#" class="roz2">roz</a>
      </li>
      <li>
         <a href="#" class="alb2">alb</a>
      </li>
      <li>
         <a href="#" class="portocaliu2">portocaliu</a>
      </li>
      <li>
         <a href="#" class="mov2">mov</a>
      </li>
   </ul>
</div>




meniu 3 css

Cod:




div.menu2 ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background: rgb(233,233,206); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(233,233,206,1) 0%, rgba(252,255,244,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,233,206,1)), color-stop(100%,rgba(252,255,244,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(233,233,206,1) 0%,rgba(252,255,244,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9ce', endColorstr='#fcfff4',GradientType=0 ); /* IE6-9 */

border: 3px solid #f4f4f4;
border-radius: 5px;
width: 550px;
box-shadow: 0px 0px 2px #bbb;
}


div.menu2 li
{
float:left;
margin-left: 5px;
padding: 2px;
}


div.menu2 a
{
padding-top: 4px;
border: 1px solid #c9c9c9;
display:block;
width:80px;
background-color:#dddddd;
  color: #EDEDED;
  text-decoration: none!important;
  text-align: center;
  text-transform: italic;
  font-weight: 600;
  font-size: 12px;
  font-family: tahoma;
min-height: 22px;
  box-shadow: 0px 0px 2px white inset;
border-radius: 5px;
  text-shadow: 0px 0px 2px white;
}

div.menu2 a:link{
background: gray}



  
  div.menu2 a.roz2,div.menu2 a.alb2,div.menu2 a.rosu2,div.menu2 a.verde2,div.menu2 a.mov2,div.menu2 a.portocaliu2{
  background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(233,233,206,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
padding-top: 4px;}
  
  
  div.menu2 a.verde2:hover{
  background: rgb(143,200,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,200,0,1) 0%, rgba(143,200,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(143,200,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#8fc800',GradientType=0 ); /* IE6-9 */;
color: black;
border: 1px solid green;
  }
  
  div.menu2 a.rosu2:hover{
  background: rgb(255,26,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,26,0,1) 0%, rgba(255,26,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(255,26,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1a00', endColorstr='#ff1a00',GradientType=0 ); /* IE6-9 */
}
  
    div.menu2 a.alb2:hover{
background: rgb(254,255,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */
 color: #222;
  text-shadow: 0px 1px 2px white;}
  
  
      div.menu2 a.roz2:hover{background: rgb(255,0,132); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,0,132,1) 0%, rgba(255,0,132,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,132,1)), color-stop(100%,rgba(255,0,132,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,0,132,1) 0%,rgba(255,0,132,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ff0084',GradientType=0 ); /* IE6-9 */
}
  
  
  div.menu2 a.portocaliu2:hover{
  background: rgb(255,168,76); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
}
  
  
  div.menu2 a.mov2:hover{
background: rgb(229,112,231); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(229,112,231,1) 0%, rgba(200,94,199,1) 47%, rgba(168,73,163,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,112,231,1)), color-stop(47%,rgba(200,94,199,1)), color-stop(100%,rgba(168,73,163,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */
}
 
  div.menu2 a.verde2{
  color: green;}
  
  
    div.menu2 a.rosu2{
  color: #C91013;}
  
      div.menu2 a.portocaliu2{
  color: #FF8800;}
  
      div.menu2 a.roz2{
  color: #FF00F6;}
  
      div.menu2 a.mov2{
  color: #9B00D3;}
  
  ----------------------
  div.menu2 a.verde2:hover{
  color: black!important;
border: 1px solid green;}
  
  
    div.menu2 a.rosu2:hover{
 color: #111;
border: 1px solid darkred;}
  
      div.menu2 a.portocaliu2:hover{
 color: #111;
border: 1px solid #8F4304}
  
      div.menu2 a.roz2:hover{
 color: #111;
border: 1px solid #AA3F96;}
  
      div.menu2 a.mov2:hover{
 color: #111;
border: 1px solid #5A2F65;}


div.menu2 a.alb2{
color: black;}

Comentarii

Teed
Sunt foarte frumoase, felicitari!
Re: 3 meniuri simple cu ajutorul CSS-ului
TeedVin 24 Ian - 18:56
Ancisz
frumos, bravo
Re: 3 meniuri simple cu ajutorul CSS-ului
AnciszLun 2 Mar - 10:30
hamsahaq
bravo
Re: 3 meniuri simple cu ajutorul CSS-ului
hamsahaqMier 18 Mar - 3:56
Re: 3 meniuri simple cu ajutorul CSS-ului
Continut sponsorizat
power_settings_newConectați-vă pentru a răspunde
remove_circleSubiecte similare
chat_bubbleSimple Toggle cu ajutorul CSS-ului & jQuery
chat_bubbleIconite sociale cu ajutorul CSS-ului
chat_bubbleAdaugarea unui meniu miscator cu ajutorul css-ului
chat_bubbleAplicarea unui gradient ( fara imagine ) cu ajutorul css-ului
chat_bubbleMana artificiala, controlata cu ajutorul gandurilor
privacy_tip Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum