środa, 4 listopada 2009

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:

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.
blog comments powered by Disqus

Wszystko o designie, dużo inspiracji i tutoriali.

Copyright 2009 - 2012 Creatyna. All rights reserved.