Rozwijane menu css + opcja jQuery

Ciekawy przykład menu wykorzystujący style css, jQuery oraz darmowe czcionki „Font Awasome„. Menu znakomicie nadaje się dla jednego poziomu, jak i dla dwupoziomowego. Bardzo łatwe w edycji (czcionki, kolory, ramki, itp.). Przedstawiona wersja jest podstawowa i w dowolny sposób można ją modyfikować. Do poprawnego działania menu konieczne jest dodanie stylu czcionki z ikonami, która można poprać: font-awesome.zip, lub ze strony twórców Font Awesome.

Krok 1 – stworzenie elementów menu

Na początek należy stworzyć plik index.html, który będzie naszym punktem wyjściowym.

<ul class="ewd_menu ext-menu">
	<li>
		<i class="ewd_fonts fa fa-home fa-lg"></i>
		<a href="">Home</a>
	</li>
	<li class="deeper parent">
		<i class="ewd_fonts fa fa-suitcase"></i>
		<a href="">Zakładki</a>
		<ul class="subb sub_out">
			<li>
				<a href=""> Podróże</a>
			</li>
			<li>
				<a href="">Wiadomości</a>
			</li>
			<li>
				<a href="">Sport</a>
			</li>
		</ul>
	</li>
	<li>
		<i class="ewd_fonts fa fa-camera"></i>
		<a href="">Galeria</a>
	</li>
	<li>
		<i class="ewd_fonts fa fa-calendar"></i>
		<a href="">Kalendarz</a>
	</li>
	<li class="parent">
		<i class="ewd_fonts fa fa-star"></i>
		<a href="">Portfolio</a>
		<ul class="subb sub_out">
			<li>
				<a href="">Skrypty</a>
			</li>
			<li>
				<a href="">Szablony</a>
			</li>
			<li>
				<a href="">Zdjęcia</a>
			</li>
		</ul>
	</li>
	<li>
		<i class="ewd_fonts fa fa-envelope"></i>
		<a href="">Kontakt</a>
	</li>
</ul>

Widzimy w skrypcie, że to menu jest w dwóch przypadkach (portfolio, zakładki) dwupoziomowe. W pierwszym poziomie przed znacznikiem <a>znajduje się znacznik <i>, do którego przypisane są ikony (Font Awasome).

Krok 2 – dodanie stylów css

W kroku tym nadamy kształt naszemu menu i listy rozwijalnej. W tym celu tworzymy plik style.css
W pliku index.html dodajemy linie z źródłem stylu:

<link href="css/ewd_menu.css" rel="stylesheet" />
.ewd_menu {
    display: block;
    padding-left: 30px;
    padding-top: 12px;
    position: relative;
    width:auto;
}
.ewd_menu li, .ewd_menu li ul li
{
	list-style-type:none;
}
.ewd_menu > li > ul {
    width: auto;
	padding-left:15px;
}
.ewd_menu > li > ul > li {
    float: left;
	background:transparent;
}

.ewd_menu, .ewd_menu * {

    margin: 0;
    padding: 0;
}

.ewd_menu ul {
    left: 0;
    position: absolute;
    top: 100%;
    z-index: 99;
}
.ewd_menu > li {
    float: left;
}
.ewd_menu li:hover > ul, .ewd_menu li.sfHover > ul {
    display: block;
}
.sub_out {
    display: none;
}
.subb_in {
    display: block;
}
.ewd_menu a {
    display: block;
    position: relative;
}
.ewd_menu ul ul {
    left: 100%;
    top: 0;
}
.ewd_menu {
    float: left;
    margin-bottom: 1em;
	background:transparent;
}
.ewd_menu ul {
    min-width: 12em;
}
.ewd_menu a {
    font-family: tahoma;
    font-size: 14px;
    font-weight: bold;
    margin-right:30px;
    text-decoration: none;
    text-transform: uppercase;
}
.ewd_menu a, .ewd_menu li.parent a {
    color: #DD0055!important;
}
.ewd_menu li.current a {
    color: #002F5B;
}
.ewd_menu li:hover a {
    color: #fff !important;
}
.ewd_menu li.parent ul li a {
    border: medium none;
    color: #939393 !important;
    font-size: 13px;
    font-weight: normal;
    padding: 0 12px;
    text-transform: capitalize;
	margin:0;
}
.ewd_menu li.parent ul li a:hover {
    color: #fff !important;
}

.ewd_menu li {
    background: #333;
    transition: background 0.2s ease 0s;
    white-space: nowrap;
	padding:5px 10px;
}

.ewd_menu ul ul li {
    background: none repeat scroll 0 0 #9AAEDB;
}

ul.ewd_menu li:hover .ewd_fonts
{
	opacity: 1;
	transition:all 0.6s ease 0s;
}

Style oczywiście można dowolnie modyfikować, obecnie są one dostosowanie do mojego gustu i kolorystyki strony.
Do naszego pliku index.html dodajemy również ścieżkę do pliku font-awesome.css, oraz folder z czcionkami fonts

<link href="css/font-awesome.css" rel="stylesheet" /> 

Na tym etapie możemy zakończyć nasz tutorial i korzystać z dobrze działającego menu. Ja pozwoliłem sobie dodać dodatkową funkcjonalność w jQuery, która może okazać się przydatna. Ale to już w kroku następnym.

Krok 3 – dodanie funkcji jQuery

Jeśli decydujesz się na ten krok na początek pamiętaj aby dodać źródło skryptów jQuery.js w pliku index.html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Funkcja działa tak, że po najechaniu na element główny menu, który zawiera podmenu (drugi poziom) i dalej poruszanie się kursorem po całej stronie poza naszym menu to lista ta zostaje rozwinięta. Jest to nieraz bardzo przydatne, w moim przypadku okazało się niezbędne. Dla wszystkich, którym ta funkcjonalność nie odpowiada omijają krok 3.

$(document).ready(function()
	{
		jQuery("ul.ewd_menu > li").mouseenter(function () 
		{

			jQuery(".ewd_menu").css("border-bottom", "0px solid #0F6185");
			jQuery("li.parent ul").removeClass('sub_in');
			jQuery("li.parent ul").addClass('sub_out');

			var menu =  jQuery(this).parent();
			menu.removeClass('sub-active');
				if($(this).hasClass('parent'))
				{
					jQuery(".ewd_menu").css("border-bottom", "2px solid #0F6185");
					jQuery(this).children('ul').removeClass('sub_out');
					jQuery("li.parent > ul").addClass('sub_in');
				}

		});
		
	});

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code