Menu tylko Css

21 marca, 2012 w kategoriach: Web developing, CSS, Podstawy

lo
3,354 3
Dane:
  • Czas pracy: 30 min
  • Poziom: Podstawowy
Opis:

Menu z wykorzystaniem css

Pliki do pobrania

Pokaż/Ukryj wszystko

Inspiracja dla tutoriala było dzieło Fisza :) ze względu na to że nie znam się na Java script postanowiłem stworzyć menu podobne do jego ale za pomocą css.

DEMO

Przygotujmy szkielet html będzie to jak zwykle lista wypunktowana.

<!DOCTYPE html>
<html>
<head>
<meta charset=iso-8859-2 />
<title>Przycisk w css</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<ul id="Menu">
<li><a href="#">Artykuły</a><ul>
<li><a href="#">chemiczne</a></li>
<li><a href="#">ekologiczne</a></li>
<li><a href="#">przemysłowe</a></li></ul>
</li>
<li>
<a href="#">Ksiażki</a><ul>
<li><a href="#">bestsellery</a></li>
<li><a href="#">przygodowe</a></li>
<li><a href="#">lektury</a></li></ul>
</li>
<li>
<a href="#">Tutoriale</a><ul>
<li><a href="#">WEB</a></li>
<li><a href="#">Motion</a></li>
<li><a href="#">Office</a></li></ul>
</li>
<li>
<a href="#">Kontakt</a><ul>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li></ul>
</li>
</ul>
</body>
</html>

trzeba pamiętać o budowie listy, zauważmy że w głównym parametrze li np. Kontakt mamy jeszcze kilka innych li które tworzą submenu

<li>
<a href="#">Kontakt</a><ul>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li></ul>
</li>

Wydawnictwo Strefa Kursów

Przechodzimy do najlepszej części zacznijmy może od nadania koloru naszej stronie sory Fisz trochę wykorzystam twoje kolorki ale tylko po to żeby było widać pewne podobieństwo.

html {
background-color: #2d2620;
}

utworzyliśmy sobie listę o id Menu odwołajmy się do niej w pliku css i dodajmy trochę właściwości a będą to:
kolor menu odległość od górnej krawędzi strony i od lewej strony, wyzerujemy margin(margines zewnętrzny) i padding(margines wewnętrzny), oraz ustalimy wysokość naszego menu

#Menu {
background-color: #645546;
position: absolute;
top: 20px;
left: 150px;
margin: 0;
padding: 0;
height:40px;
}

Chcemy się pozbyć wypunktowania oraz ustalić w jak będzie się ustawiać nasze menu a uzyskamy to za pomocą funkcji float

#Menu li {
list-style: none;
float: left;
background-color: #645546;
}

musimy zadbać jeszcze o wygląd linków a więc do dzieła

#Menu li a {
display: block;
padding: 3px 8px;
text-transform: uppercase; /*Tylko duże litery*/
text-decoration: none; /*usuwa podkreślenie*/
color: #e3c814; /*kolor czcionki*/
font-weight: bold;
line-height: 40px; /*ustawiliśmy wysokość menu na 40px jeśli chcemy aby tekst wyświetlał się po srodku musimy użyć takiej funkcji*/
}

Możemy a nawet wypadało by ustawić opcję wyglądu znacznika a po najechaniu na niego myszą, wykorzystujemy tu taką funkcję

#Menu li a:hover {
top: 60px;
background-color: #514539;
}

Nie chcemy żeby przez cały czas było widać wszystkie submenu, musimy go zablokować,

#Menu li ul {
display: none;
}

Chcemy natomiast żeby wyświetlił się po najechaniu na link, dlatego teraz przypiszemy odpowiednie parametry

#Menu li:hover ul, #Menu li.hover ul {
position: absolute;
display: block;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}

tym o to sposobem otrzymaliśmy proste menu, nie używając skryptów javy
Tak to się prezentuje

Alt 111

działanie możecie zobaczyć pobierając plik dołączony to tutka

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (3 wypowiedzi)

Dodaj odpowiedź

Dodaj komentarz