Accordion Menu CSS3 Transition

piątek, 27 września 2013

Accordion Menu CSS3 Transition

Dzisiaj pokażę jak stworzyć rozsuwana harmonijkę Accordion Menu używając CSS3 Transition. Oczywiście ostateczny wygląd zależy od fantazji twórcy .Ja pokazałem postawową.Skupiajac się na ukazaniu samego mechanizmu tworzenia Accordion Menu z wykorzystaniem CSS3 Transition

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Accordion Menu Using CSS3 Transition by Adam kleszewski</title>
<style>
body {
font: 13px Arial, Helvetica, sans-serif;
color: #1e1e1e;
}
#container {
width: 600px;
}
#accordion .item {
width: 400px;
height: 30px;
overflow: hidden;
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
}
#accordion div:hover {
height: 180px;
}
#accordion div:hover a {
border-bottom: 1px solid #ccc;
font-weight: bold;
}
#container #accordion .item p a {
background-color: #666;
color:#FFF;
border:2px solid #999;
padding:5px;
height:20px;
width: 100px;
font-family: "Courier New", Courier, monospace;
text-align:center;
font-size:11px;
}
</style>
</head>
<body>
<div align="center">
<div id="container">
<div id="accordion">
<div class="item"> <a href="http://www.strony.internetowe.jupe.pl/projektowanie-stron-internetowych" target="_blank">Strony internetowe</a>
<p>W dobie globalizacji informacji szybki i bezproblemowy dostęp do niej to bardzo ważna sprawa.Usługi projektowania stron internetowych umożliwiły posiadanie własnego "kącika" strony internetowej.Praktycznie dla każdego.Czy warto z tego skorzystać i mieć własną stronę internetową.Zdecydowanie tak </p>
</div>
<div class="item"> <a href="http://www.strony.internetowe.jupe.pl/oferta-strony-internetowe" target="_blank">Projektowanie oferta</a>
<p>Budowanie stron internetowych to moja pasja.Powierzone prace wykonuje najlepiej jak potrafię Budowanie stron wymaga ugruntowanej wiedzy solidności i zaangażowania Projektowanie stron to praca w której cenię sobie dokładność rzetelność i uczciwość.Gorąco zapraszam wszystkich zainteresowanych do .</p>
</div>
<div class="item"> <a href="http://www.strony.internetowe.jupe.pl/tego-nie-robie-oferta-strony-internetowe" target="_blank">Tego nie robię</a>
<p>Poniżej przedstawiam praktyki i sytuacje jakie często maja miejsce.Tego nie czyli o czym ciągle warto pamiętać aby nie dać się wykorzystać przez nie uczciwych zleceniodawców których niestety ciągle nie brakuje.Powodów takiego postępowania jest wiele i długo by </p>
</div>
<div class="item"> <a href="http://www.strony.internetowe.jupe.pl/ile-kosztuje-strona-internetowa" target="_blank">Ile kosztuje</a>
<p>Zanim odpowiem na to pytanie przyjrzyjmy się co jest potrzebne podczas budowania serwisów internetowych aby Twoja firma mogla posiadać wlasną profesjonalna stronę www .Wlasna domena internetowa. co to takiego ?. Kazda strona znajdujaca sie w internecie musi posiadac wlasny unikalny adres, który jest nie powtarzalny dla każdej strony</p>
</div>
</div>
</div>
</div>
</body>
</html>

Etykiety

piątek, 27 września 2013

Accordion Menu CSS3 Transition

Brak komentarzy:

Prześlij komentarz

lubię to

Popularne posty