Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web development, networking and server security. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Javascript-Array - Padajući Meni

jQueri Jednostavan padajući meni Plugin

Specifičnost ovog padajućeg menija je da se ovih 20 linija koda i odsustvo različitih glomaznih miševa dešava u HTML kodu.

HTML kod u meniju je predstavljen kao nesređena lista (ul-oznaka) i nepostoji više ubacivanje. Samo običan spisak stavki. Mala skripta nalazi ovaj spisak po ID-u, a onda, samo sačekaj rukovaoca mišem.
Veoma jednostavno.

Ako ste u potrazi za čistom padajućom meni skriptom bez jQueri zahteva, možete ga naći ovde: Simple DD Menu v2.0

Primer:

Kompatibilnost: IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+
Zahtevi: jQuery biblioteka
Veličina: < 1Kb;
Karakteristike:

  • nesređene liste kao strukture menija
  • odsustvo miša događaja u html-u
  • timeout Efekat

Licenca: Besplatna.

Vodič

Hajde da to uradimo. Morate uključiti jQueri biblioteku:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>

Kao što možete da vidite, veza ukazuje na Google adresu. Postoji mnogo verovatnoća da jQueri već keširaju u pretraživaču.

Sada možete da kreirate strukturu glavnog menija pomoću HTML nesređene liste. Korišćenje nesređena lista za navigaciju je veoma dobra praksa. Pre svega, to je semantički ispravno, takođe je korisna za menjanje / editovanje, posebno u složenim slučajevima.

<ul id="jsddm">
    <li><a href="#">JavaScript</a>
        <ul>
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Effect</a>
        <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Help</a></li>
</ul>

Razlika između ove liste od bilo koje druge - identifikator [id = ""] jsddm

Stilovi. Poravnajte elemente prvog nivoa za redom. Podešavanje za sve a-tag prikazu: stil blok. Sakrij sve unutrašnje neuređene liste (slojeva). Ukrasiti sve ostalo.

#jsddm
{	margin: 0;
	padding: 0}
	
	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial}

	#jsddm li a
	{	display: block;
		background: #20548E;
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		width: 70px;
		color: #EAFFED;
		white-space: nowrap}

	#jsddm li a:hover
	{	background: #1A4473}
		
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-top: 1px solid white}
		
		#jsddm li ul li
		{	float: none;
			display: inline}
		
		#jsddm li ul li a
		{	width: auto;
			background: #9F1B1B}
		
		#jsddm li ul li a:hover
		{	background: #7F1616}

Dakle, scenario. Vezuju pretovar manifestacija sa prvog nivoa li-čvorova. Ako miša preko dugmeta - zatvori stari sloj (ako je vidljiva) i otvoriti nova. Kada miš izađe iz dugmeta - uključite tajmer na 500 milisekundi da zatvorite sve slojeve. To je sve :)

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

Napomena: Ne zaboravite da koristite DOCTIPE deklaraciju za univerzalnu kompatibilnost, na primer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

U potrazi za multi-nivo menija skripti? Pogledajte Multi Level Drop Down Menu.













Published (Last edited): 02-06-2013 , source: http://javascript-array.com/scripts/jquery_simple_drop_down_menu