Tworzymy Sliding Door Menu

Dzisiaj zajmiemy się stworzeniem menu takiego jak na mashkulture.net, tylko zamiast spritów użyjemy sliding door i cufona.




Tła:
Zaczynamy od stworzenia teł do buttonów, jedne dla aktywnego buttona a drugie do reszty.
Tła dla aktywnego linka

oraz dwa dla nieaktywnych

Istotą sliding door jest to, że dzięki zastosowaniu sprytnego kodu możemy uzyskać graficzny button o dowolnej długości.

Tworzymy menu w HTML:

<ul class="menu">
    <li class="active"><span><a href="#">DOWNLOAD</a></span></li>
    <li><span><a href="#">BUTTON</a></span></li>
    <li><span><a href="#">TEST</a></span></li>
    <li><span><a href="#">Button</a></span></li>
    <li><span><a href="#">Button</a></span></li>
    <li><span><a href="#">Button</a></span></li>
    </ul>

dodajemy CSS:

.menu a{
color:#bbbbbb;
text-decoration:none;
background:url(left-u.png) no-repeat left top ;
display:block;
padding-left:20px;
height:35px;
line-height:35px; 
}

.menu span{
background:url(right-u.png) right top no-repeat; 
padding-right:20px;
height:35px;
display:block;
margin-top:3px;
}

Tutaj w pełni działające Sliding Doors.
Dodajemy teraz kod dla aktywnego linka:

.menu .active a{
color:#000;
text-decoration:none;
background:url(left.png) no-repeat left top;
display:block;
padding-left:20px;
height:35px;
line-height:35px; 
}

.menu .active span{
background:url(right.png) right top no-repeat; 
padding-right:20px;
height:35px;
display:block;
}

Dzięki temu otrzymujemy dwa rodzaje buttonów. Teraz dodamy kolor i marginesy aby uzyskać efekt wysuwania się buttonu:

.menu a:hover{color:#4F4F4F;}
.menu li:hover {margin-top:-2px;}
.menu li.active {margin-top:-3px;}

Cufon:
Mamy teraz ciekawe menu, pozostaje tylko dodać wymyślny font. Używamy Cufona czyli skrypt do zastępowania fontów własnymi. Pobieramy najnowszą wersję z oficjalnej strony Instalujemy go na naszej stronie:

<script src="../js/cufon.js" type="text/javascript"></script>
  <script src="../fonts/[naszfont].font.js" type="text/javascript"></script>

Własny font możemy wygenerować tutaj http://cufon.shoqolate.com/generate/ . Gdy już mamy wygenerowany i podpięty font musimy uruchomić skrypt dla danego selektora:

<script type="text/javascript">
   Cufon.replace('.menu', {
 hover: true
});
  </script>

A teraz uwaga, jak można przeczytać w FAQ Cufon może nie wyświetlać się w IE, dlatego najlepiej dodać jakiegoś frameworka przed Cufona:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="../js/cufon.js" type="text/javascript"></script>

Teraz wszystko powinno śmigać.

Netografia:

• http://www.alistapart.com/articles/slidingdoors/ 
• http://www.jankoatwarpspeed.com/(...)make-fancy-buttons-using-css-sliding-doors-technique.aspx 
• http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ 
• http://wiki.github.com/sorccu/cufon/styling
  

Subskrybuj lub podziel się

Będzie miło jeśli zasubskrybujesz bloga, bądź podzielisz się tym artykułem.

Autor: Marcin Piszczek

Interesuję się designem, internetem i nowinkami technicznymi. Z zamiłowania jestem web developerem i web designerem,a od jakiegoś czasu również blogerem. W wolnych chwilach gram w DotA. Kibicuję Zagłębiu.

Masz jakieś sugestie? Napisz do mnie. Możesz mnie również obserwować na Twitterze.