Wifeo Creative Code

<<< back to homepage for others creatives tricks

FULL CSS MENU

MENU 1MENU 1

MENU 2MENU 2

SOUS MENU 1

SOUS MENU 2

SOUS MENU 3

MENU 3MENU 3

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="fDHjB" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/fDHjB'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/15-full-css-menu.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.wifeo_1408967958pagemenu > a
{
  color:#FFFFFF;
  text-decoration:none
} 
.wifeo_1408967958rubrique > a
{
  color:#FCCF3C;
  text-decoration:none
} 
.wifeo_1408967958rubrique:hover > a
{color:#FCCF3C;
  font-weight:bold;
  text-decoration:none
} 
.wifeo_1408967958pagesousmenu > a
{
  color:#FFFFFF;
  text-decoration:none
} 
.wifeo_1408967958conteneur_menu
{
  border-spacing:0px
} 
.wifeo_1408967958conteneur_menu
{
  width:100%;
  display:table;
  height:30px
} 
.wifeo_1408967958conteneur_menu a
{
  text-decoration:none;
  display:table-cell;
  vertical-align:middle;
  height:30px
} 
.wifeo_1408967958pagemenu, .wifeo_1408967958rubrique
{
  float:left;
  width:33.333%;
  display:table;
  vertical-align:middle;
  position:relative
} 
@media screen and (min-device-width:1024px)
{
  .wifeo_1408967958pagemenu span, .wifeo_1408967958rubrique span
  {
    color:#FFFFFF;
    position:relative;
    display:inline-block;
    padding:5px 0 5px;
    background-color:#FC6204;
    width:100%;
    height:30px;
    text-align:center;
    font-size:22px;
    border-bottom:3px solid #A20800;
    -webkit-transition:-webkit-transform 0.5s;
    -moz-transition:-moz-transform 0.5s;
    -ms-transition:-ms-transform 0.5s;
    -o-transition:-o-transform 0.5s;
    transition:transform 0.5s;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    -ms-transform-origin:50% 0;
    -o-transform-origin:50% 0;
    transform-origin:50% 0;
    transform-style:preserve-3d
    }
} 
.wifeo_1408967958pagemenu a, .wifeo_1408967958rubrique > a
{
  color:#FCCF3C;
  position:absolute;
  display:inline-block;
  padding-top:5px;
  padding-bottom:5px;
  background-color:#FC6204;
  width:100%;height:30px;
  text-align:center;
  font-size:22px
} 
@media screen and (min-device-width:1024px)
{
  .wifeo_1408967958pagemenu a, .wifeo_1408967958rubrique > a
  {
    color:#FCCF3C;
    position:absolute;
    display:inline-block;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#00A096;
    width:100%;
    height:30px;
    text-align:center;
    font-size:22px
  }
} 
.wifeo_1408967958pagemenu:hover span, .wifeo_1408967958rubrique:hover span
{
  width:100%;
  height:30px;
  box-shadow:10px 35px 70px 0px #333333
} 
@media screen and (min-device-width:1024px)
{
  .wifeo_1408967958pagemenu:hover span, .wifeo_1408967958rubrique:hover span
  {
    color:#FC6204;
    -webkit-transform:rotateX(85deg) translateY(-22px);
    -moz-transform:rotateX(85deg) translateY(-22px);
    -ms-transform:rotateX(85deg) translateY(-22px);
    -o-transform:rotateX(85deg) translateY(-22px);
    transform:rotateX(85deg) translateY(-22px);
    -webkit-transition:all 0.25s ease;
    -moz-transition:all 0.25s ease;
    -ms-transition:all 0.25s ease;
    -o-transition:all 0.25s ease;
    transition:all 0.25s ease
  }
} 
.wifeo_1408967958sousmenu
{
  width:100%;
  left:0;
  opacity:0;
  position:absolute;
  top:0px;
  visibility:hidden;
  z-index:1;
  border-bottom:3px solid #00463C
} 
@media screen and (min-device-width:1024px)
{
  .wifeo_1408967958sousmenu
  {
    -webkit-transition:all 0.25s ease;
    -moz-transition:all 0.25s ease;
    -ms-transition:all 0.25s ease;
    -o-transition:all 0.25s ease;
    transition:all 0.25s ease
  }
} 
.wifeo_1408967958pagesousmenu
{
  width:100%;
  text-align:center;
  display:table
} 
.wifeo_1408967958sousmenu a
{
  padding-left:5px;
  padding-right:5px;
  text-shadow:none;
  background-position:center;
  text-align:center;
  background-color:#00A096
} 
.wifeo_1408967958rubrique:hover > .wifeo_1408967958sousmenu
{
  opacity:1;
  top:40px;
  visibility:visible
}

HTML CODE :

<div class='wifeo_1408967958conteneur_menu'>
        <div class='wifeo_1408967958pagemenu'>
          <a href='http://www.wifeo.com/code'>MENU 1</a><span>MENU 1</span>
        </div>
        <div class='wifeo_1408967958rubrique'>
          <a href='#mw999'>MENU 2</a><span>MENU 2</span>
            <div class='wifeo_1408967958sousmenu'>
              <div class='wifeo_1408967958pagesousmenu'>
                <a href='http://www.wifeo.com/code'>SOUS MENU 1</a>
              </div>
              <div class='wifeo_1408967958pagesousmenu'>
                <a href='http://www.wifeo.com/code'>SOUS MENU 2</a>
              </div>
              <div class='wifeo_1408967958pagesousmenu'>
                <a href='http://www.wifeo.com/code'>SOUS MENU 3</a>
              </div>
            </div>
          </div>
        <div class='wifeo_1408967958pagemenu'>
          <a href='http://www.wifeo.com/code'>MENU 3</a><span>MENU 3</span>
        </div>
      </div>