tanie strony www bydgoszcz tanie strony www bydgoszcz tanie strony www bydgoszcz
Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz
www.at.bydgoszcz.pl
Pomysł na menu na stronie: Efekt obracania się menu.

Brak pomysłu na menu na stronie? Efekt nietypowej nawigacji.

Poniżej znajduje się efekt dość nietypowej nawigacji na stronie (menu podstron) polega on na tzw "odwracaniu" zawartości.
Wykonanie jest banalnie proste i wymaga jedynie kilku styli CSS oraz struktury menu w HTML. 


Kod CSS

nav ul {
   margin: 0;
   padding: 0;
   display: block;
   margin: 0 auto;
   width: 90%;
   cursor: pointer;
}
nav ul li{
   margin: 0;
   padding: 0;
   display: block;
   float: left;
   width: 25%;
   font: 17px Verdana;
}
.container {
   position: relative;
   -webkit-perspective: 800;
   -moz-perspective: 800;
   -ms-perspective: 800;
   -o-perspective: 800;
}
.card {
   width: 100%;
   height: 50px;
   position: relative;
   -webkit-transform-style: preserve-3d;
   -webkit-transition: 0.5s;
   -moz-transform-style: preserve-3d;
   -moz-transition: 0.5s;
   -ms-transform-style: preserve-3d;
   -ms-transition: 0.5s;
   -o-transform-style: preserve-3d;
   -o-transition: 0.5s;
   transition: 0.5s;
}
.container:hover .card {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);	
   transform: rotateY(180deg);				
}
.face {
   position: absolute;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: white;
   line-height: 50px;
   text-align: center;
}
.front {
   background: #36C;
   z-index: 10;
}
.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
   background: #F60; 
}
.container:hover .front {
   z-index: 0;
}  


Kod HTML

<nav>
<ul>
    <li><a class="container" href="#start">
    <div class="card">
        <div class="face front">Start</div>
        <div class="face back">Kilka słów wstępu</div>
    </div>
    </a></li>
    <li><a class="container" href="#oferta">
    <div class="card">
       <div class="face front">Oferta</div>
       <div class="face back">W naszej ofercie</div>
    </div>
    </a></li>
    <li><a class="container" href="#galeria">
    <div class="card">
       <div class="face front">Galeria</div>
       <div class="face back">Zobacz nasze prace</div>
    </div>
    </a></li>
    <li><a class="container" href="#kontakt">
    <div class="card">
       <div class="face front">Kontakt</div>
       <div class="face back">Dane teleadresowe</div>
    </div>
    </a></li>
</ul>
</nav>

 

 ↻ do góry  « powrót 
Copyright © 2017-2019 www.at.bydgoszcz.pl

Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz

Strony Internetowe    Pytania i odpowiedzi    Szablony tanich stron    Zamów stronę WWW
projekty stron strony internetowe bydgoszcz
g+