Meniu simplu css

Conectați-vă pentru a răspunde

Aditzu.

Diana

PitiKu

Dana.

mr.franta

9 participanți

:: ForumGratuit & Web-Design :: Resurse Web-Design :: Resurse

Meniu simplu cssMar Ian 07, 2014 6:52 pm

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 http://frannnta-design.hitforum.ro/h44-meniu-simplu-css

Previzualizare 2 (atentie aceasta previzualiare este doar demo fara coduri)
http://frannnta-design.hitforum.ro/h53-rainbowmenu
Daca acest meniu va place,apasati pe butonul

Imi place!

din partea dreapta

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 optiminzat pt fg

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;}

Ultima editare efectuata de catre Mr.franta in Joi Ian 23, 2014 4:56 pm, editata de 2 ori

Re: Meniu simplu cssMar Ian 07, 2014 8:52 pm

este super bravo frannnta :*

Re: Meniu simplu cssMar Ian 07, 2014 9:18 pm

wowowow
Super tare!!
bravo/felicitari/esti un geniu!:)
Dar totusi ce ar trebui sa modific pentru a fi un albastru dechis nu rosu:D

Re: Meniu simplu cssMar Ian 07, 2014 9:37 pm

nu este optimizat pentru forum gratuit
dar daca vrei sa schimbi culorile

in acest cod css

Cod:

div.orizontal a:link, div.orizontal a:visited {

inlocuiesti

Cod:

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 */

cu imagine sau cu o culoare

cu o culoare

Cod:

background-color: #culoare;

imagine

Cod:

background-image: url(link imagine);

sau cu un gradient pe care il gasesti aici http://www.colorzilla.com/gradient-editor/

iar pentru hover acelasi lucru cauti in codul css cu terminatia

Cod:

:hover

sa sfarsitul codului css

Re: Meniu simplu cssMar Ian 07, 2014 10:39 pm

un nou update la meniu http://frannnta-design.hitforum.ro/h53-rainbowmenu

test

Ultima editare efectuata de catre Mr.franta in Joi Ian 23, 2014 4:54 pm, editata de 2 ori

Re: Meniu simplu cssMier Ian 08, 2014 12:59 am

si ar merge sal pun direct la mine pe forum? ca eu din cate vad e pentru pagina html...

Re: Meniu simplu cssMier Ian 08, 2014 12:37 pm

pentru punerea lui pe forum trebuie sa iei codul html si sa il adaugi in sectiunea unde doresti pe forum(generalitati,overal_header) sau cu un javascript pe toate paginile,si codul css il adaugi in css,daca ai nelamuriri te rog sa postezi in sectiunea de suport

Re: Meniu simplu cssVin Ian 10, 2014 4:21 pm

Superbbbbbb ! Bravo !

Re: Meniu simplu cssVin Ian 10, 2014 7:36 pm

imi place mai mult al doilea are un efect super frumos

Re: Meniu simplu cssSam Ian 11, 2014 7:08 pm

fain meniu !

Re: Meniu simplu cssMier Ian 15, 2014 9:11 pm

Foarte frumos

Re: Meniu simplu cssVin Ian 17, 2014 5:37 pm

Cu permisiunea lui Mr.franta am optimizat aceste 2 meniuri pentru forumgratuit.

http://frannnta-design.hitforum.ro/h53-rainbowmenu

pentru codurile meniului va rog sa citit primul mesaj,am pus codurile acolo

Re: Meniu simplu cssLun Ian 20, 2014 7:53 pm

Nice . Very nice

Re: Meniu simplu css

Subiecte similare

creare banner cu bara de meniu elegant si simplu
No Avatar [Simplu]
Addons HNS Simplu
Simplu - O secundă
ceva simplu si al obiect

Mergi direct la:

Permisiunile acestui forum:

Nu puteti raspunde la subiectele acestui forum

Conectați-vă pentru a răspunde

Meniu simplu css

descriptionMeniu simplu cssMar Ian 07, 2014 6:52 pm

descriptionRe: Meniu simplu cssMar Ian 07, 2014 8:52 pm

descriptionRe: Meniu simplu cssMar Ian 07, 2014 9:18 pm

descriptionRe: Meniu simplu cssMar Ian 07, 2014 9:37 pm

descriptionRe: Meniu simplu cssMar Ian 07, 2014 10:39 pm

descriptionRe: Meniu simplu cssMier Ian 08, 2014 12:59 am

descriptionRe: Meniu simplu cssMier Ian 08, 2014 12:37 pm

descriptionRe: Meniu simplu cssVin Ian 10, 2014 4:21 pm

descriptionRe: Meniu simplu cssVin Ian 10, 2014 7:36 pm

descriptionRe: Meniu simplu cssSam Ian 11, 2014 7:08 pm

descriptionRe: Meniu simplu cssMier Ian 15, 2014 9:11 pm

descriptionRe: Meniu simplu cssVin Ian 17, 2014 5:37 pm

descriptionRe: Meniu simplu cssLun Ian 20, 2014 7:53 pm

descriptionRe: Meniu simplu css

Meniu simplu cssMar Ian 07, 2014 6:52 pm

Re: Meniu simplu cssMar Ian 07, 2014 8:52 pm

Re: Meniu simplu cssMar Ian 07, 2014 9:18 pm

Re: Meniu simplu cssMar Ian 07, 2014 9:37 pm

Re: Meniu simplu cssMar Ian 07, 2014 10:39 pm

Re: Meniu simplu cssMier Ian 08, 2014 12:59 am

Re: Meniu simplu cssMier Ian 08, 2014 12:37 pm

Re: Meniu simplu cssVin Ian 10, 2014 4:21 pm

Re: Meniu simplu cssVin Ian 10, 2014 7:36 pm

Re: Meniu simplu cssSam Ian 11, 2014 7:08 pm

Re: Meniu simplu cssMier Ian 15, 2014 9:11 pm

Re: Meniu simplu cssVin Ian 17, 2014 5:37 pm

Re: Meniu simplu cssLun Ian 20, 2014 7:53 pm

Re: Meniu simplu css