HTML CSS Windows Photoshop
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
 Avtor: -primož-    08.11.09
Flyout meni               
CSS vodiči
flyout_meniMeni, ki se odpira v desno.

Prikaz CSS flyout menija:





Navodila za uporabo:

Številka vam pove, katero vrstico morate spreminjati. V tej vrstici najdite navedeno kodo, če pa je ni pa jo dopišite zraven.

Barva besedila: 17 - #menu a { color: #   ;}
Pisava: 17 - #menu a { font-family:   ; }

Začetno ozadje: 17 in 29 - background: #   ;
Ozadje, ko je miška čez: 28 in 30 - background: #   ;


Kako dodati novo postavko menija?

Vstavite:
1
 
<li><a href="#url">Moje Mesto</a></li>

 

in spremenite Moje Mesto. Namesto #url vstavite svoje povezave.

Kako dodati postavko, ki ima svoje postavke?

Vstavite:
1
2
3
4
5
6
7
8
9
10
11
12
 
<li><a class="fly" href="#url">Ponudba<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href="#url">Izdelava spletnih strani</a></li>
		<li><a href="#url">Svetovanje</a></li>
		<li><a href="#url">Prenosi</a></li>
		<li><a href="#url">Igre</a></li>
	        <li><a href="#url">Vodiči</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

Tako vstavite novo postavko menija tudi v podmenije, ki se vam odpirajo. Glejte, kako so z odmiki odmaknjeni posamezni deli menija. Bolj, kot je meni ločen, bolj so deli menija odmaknjeni v desno (v kodi).


V isti mapi, kot HTML dokument s flyout menijem mora biti tudi slika puščice (v meniju na desni). Slika se imenuje Arrow.gif.

puščica


Postavko menija, ki naprej odpre podmeni lahko posebej oblikujete. Te postavke oblikuje class fly.

Za poseben stil teh postavk spremenite 
#menu li a.fly in #menu li a.fly:hover

To bi bilo vse od razlage. Če se komu kje zatakne lahko svoje vprašanje vpiše med komentarje in odgovorjeno mu bo!

*Menija nisem izdelal sam. Kodo sem dobil na spletni strani CSS play. Tudi vam priporočam, da si stran temeljito ogledate, saj boste našli mnogo zanimivega in uporabnega. Ne boste mogli verjeti, kaj vse se da s CSSjem narediti.

Komentiraj:
Ime
E-mail
Spletna stran

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."
 
Sorodni vodiči