Forum.Legalne.info: [html/css] Menu inaczej - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

[html/css] Menu inaczej czyli jak stworzyć menu z jednego pliku graficznego.

#1 Użytkownik jest niedostępny   Planet 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 401
  • Dołączył: 28-November 06
  • GG: 5010276
  • MiejscowośćLublin

Napisany 30 June 2007 - 09:18 PM

Menu inaczej...

W tutorialu chciałbym pokazać w jaki sposób stworzyć menu posiadając tylko jeden plik graficzny z zintegrowanym menu. W tym celu potrzebujemy projektu graficznego naszego menu wykonanego w następujący sposób:
Dodaj obrazek

W jednym dokumencie znajdują się dwa pasy menu, u góry ten który będzie wersją normalną, a u dołu ten, który pokazywać się będzie po najechaniu na button myszą. Gdy mamy już ten dokument, w którego tworzenie się nie zagłębiam, przystępujemy do pisania.

Kod strony "menu.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu z jednego pliku graficznego. (cc) Planet</title>

</head>

<body>

	<div id="menu">
	
		<div id="link1"><a href="#" title="Link1"></a></div>
		<div id="link2"><a href="#" title="Link2"></a></div>
		<div id="link3"><a href="#" title="Link3"></a></div>
		<div id="link4"><a href="#" title="Link4"></a></div>
		<div id="link5"><a href="#" title="Link5"></a></div>
	
	</div>

</body>
</html>


W pliku HTML tworzymy DIV "menu", który będzie nam trzymał poszczególne buttony. W tym DIVie lokujemy 5 kolejnych, odpowiedzialnych za każdy element menu (a więc div id="link1" odpowiadać będzie buttonowi nr 1).
Gdy odpalimy naszą stronę w przeglądarce nic nie ujrzymy, gdyż brakuje nam zasadniczej części - arkusza stylów. W związku z tym do sekcji <head> naszego kodu doklejamy linijkę:
<link rel="stylesheet" href="style.css" type="text/css" />

i przystępujemy do tworzenia stylów.

Arkusz stylów "style.css":
/*
Title: Menu z jednego pliku graficznego.
Author: Piotr Wegner aka Planet
Version: 1.00
*/

body { background-color: #999; }

#menu {
	width: 500px;								/* szerokość pliku graficznego */
	height: 30px;								/* połowa wysokości pliku graficznego */
	border: 1px solid #666;
	margin-left: auto; margin-right: auto;		/* marginesy środkują nam menu na stronie */
}

/* Button nr 1 */

#link1 a {
	width: 100px;								/* porządana szerokość buttona */
	height: 30px;								/* porządana wysokość buttona */
	background: url(menu.png) 0 0 no-repeat;	 /* tło: ścierzka dostępu, przesunięcie w poziomie, przesunięcie w pionie, bez powtarzania */
	display: block;								/* wyświetla DIV "link1 a" jako element blokowy */
	float: left;
}

#link1 a:hover {								/* zachowanie buttona po najechaniu na niego myszką */
	width: 100px;
	height: 30px;
	background: url(menu.png) 0 -30px no-repeat;
	display: block;
	float: left;
}


W ten sposób określamy, który obszar naszego dokumentu graficznego ma zostać wyświetony w DIV. Kolejne buttony dodajem w podobny sposób do stylów, pamiętając jednak o tym aby zmienić przesunięcie w poziomie danego buttona. Dajmy na to, że nasz drugi button zaczyna się na 100px szerokości naszego obrazka - przesunięcie w poziomie wyniesie -100px. !Uwaga!: Nie możemy zapomnieć o znaku " - " przed liczbą piskeli.

Reszta kodu CSS:
/* Button nr 2 */

#link2 a {
	width: 100px;
	height: 30px;
	background: url(menu.png) -100px 0 no-repeat;
	display: block;
	float: left;
}

#link2 a:hover {
	width: 100px;
	height: 30px;
	background: url(menu.png) -100px -30px no-repeat;
	display: block;
	float: left;
}

/* Button nr 3 */

#link3 a {
	width: 100px;
	height: 30px;
	background: url(menu.png) -200px 0 no-repeat;
	display: block;
	float: left;
}

#link3 a:hover {
	width: 100px;
	height: 30px;
	background: url(menu.png) -200px -30px no-repeat;
	display: block;
	float: left;
}

/* Button nr 4 */

#link4 a {
	width: 100px;
	height: 30px;
	background: url(menu.png) -300px 0 no-repeat;
	display: block;
	float: left;
}

#link4 a:hover {
	width: 100px;
	height: 30px;
	background: url(menu.png) -300px -30px no-repeat;
	display: block;
	float: left;
}

/* Button nr 5 */

#link5 a {
	width: 100px;
	height: 30px;
	background: url(menu.png) -400px 0 no-repeat;
	display: block;
	float: left;
}

#link5 a:hover {
	width: 100px;
	height: 30px;
	background: url(menu.png) -400px -30px no-repeat;
	display: block;
	float: left;
}

Pamiętajmy też o "float". Porządkuje on nam strukturę w ten sposób, iż każdy następny element będzie "przyciągał" się do tego z lewej.

Outcome można zobaczyć tu: http://grapix.devcast.pl/tuts/menu/menu.html

Zdaję sobie sprawę, że moja umiejętność przekazywania wiedzy jest niewystarczająca, dlatego też nie zdziwię się jeśli tutorial ten nie będzie zrozumiały. Jakkolwiek, kieruję go do osób mających już trochę doświadczenia z Kaskadowymi Arkuszami Stylów.



Tutorial opracowany i napisany przez Planet dla WebTips.pl.
2007 (cc) Część praw zastrzeżona. Artykuł może być powielany i/lub modyfikowany z zachowaniem nazwy autora oryginału.

Inspiracja zaczerpnięta z yellowicon.com.

Dodaj obrazek
0

#2 Użytkownik jest niedostępny   Saddam92 

  • Ojciec dyrektor
  • Grupa: Użytkownicy
  • Postów: 2258
  • Dołączył: 16-April 06
  • GG: 4033804

Napisany 20 July 2007 - 10:16 PM

fajne,zgrabnie opisane i przyjemne..

mam jednak ale..
Dlaczego używasz tak dużo divów? Czy zamiast <div id="link1"> itd.. nie można by użyć stylowanej listy z id/class ??

Z tego co czytałem menu powinno się robić na listach właśnie..
0

#3 Użytkownik jest niedostępny   frytek92 

  • Rozgadany
  • Grupa: Użytkownicy
  • Postów: 58
  • Dołączył: 04-May 07

Napisany 21 April 2008 - 09:43 PM

Planet Jesteś Bogiem Uswiadom To Sobie Ja Tez Jestem Bogiem Wyobrazam To Sobie :) Zarcik Naprawde Super Turioal Daje Rade.Własnie Tego Szukałem Nie Obrazisz Sie Jesli Uzyje Jako Wzór Do Mej WWW.
0

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień