30 Červen
0

Horizontální menu – počítání šířek jednotlivých položek

(x)HTML, Javascript, Nástroje

Jelikož je mojí hlavní náplní práce implementece webu pro redakční system, kde si obsah zákazník plní a upravuje sám, tak musím počítat s nemožným. Jeden z takových typických příkladů je horizontální menu, např. na www.realspektrum.cz nebo na www.hotel-prestige.cz. Jak si můžete všimnout, tak na obou webech je menu uděláno tak, aby byly jendotlivé položky roztáhnutý na celou šířku, a nebyl na konci nehezký „zub“.
Proto jsem si sepsal jednoduchý Javascript, který mi pomůže s přepočítáním, a roztáhne menu (respektive jednotlivé položky) tak, aby menu přesně sedělo a bylo přes celou šířku stránky.

Ukázkový zdrojový kód HTML z realspektrum.cz:

Javascript, s jednotlivými komentáři

var widthLI
var widthSum = 0

/* SPOCITANI ITEMU */
countLI = $('#menu li').length

/* ODSTRANENI VSEM ITEMUM PADINNGU Z LEVA A Z PRAVA KVULI POCITANI SIRKY */
$('#menu a').css('padding', '9px 0px 10px 0px')

/* PROBEHNUTI VSECH ITEMU A ZJISTENI JEJICH SIREK + CELKOVE SPOCITANI */
$('#menu li').each(function(i, val) {

	/* ZJISTENI SIRKY JEDNOTLIVEHO ITEMU */
	widthLI = $(this).width()

	/* PRICTENI SIRKY AKTUALNIHO ITEMU K CELKOVE SIRCE + PREVEDENI NA CISLO */
	widthSum += Math.abs(widthLI)

})

/* ZJISTENI ROZDILU SIRKY A URCENI MEZERY */
differenceWidth = $('#menu').width() - widthSum

/* ZJISTENI JAK VELKY PADDING SE MUZE DAT NA JEDNIOTLIVY ITEM */
paddingSize = (differenceWidth / countLI) / 2

/* PRIRAZENI PADDINGU JEDNOTLIVYM ITEMUM */
paddingSizeItem = '9px ' + Math.floor(paddingSize) + 'px' + ' 10px ' + Math.floor(paddingSize) + 'px'
$('#menu a').css('padding', paddingSizeItem)

/* SPOCITANI VELIKOSTI POSLEDNIHO PADDINGU */
differenceWidthWithPadding = (differenceWidth - (Math.floor(paddingSize) * countLI * 2)) + Math.floor(paddingSize)

/* URCENI PADDINGU PRO POSLEDNI ITEM */
paddingSizeItemWithDifference = '9px ' + differenceWidthWithPadding + 'px' + ' 10px ' + Math.floor(paddingSize) + 'px'	

/* PRIRAZENI PADDINGU POSLEDNIMU ITEMU */
$('#menu li').last().find('a').css('padding', paddingSizeItemWithDifference)

Je asi zbytečné dál celou funkci popisovat, tento případ je při využití paddingu z leva a prava, ale samozřejmě jde s lehkou úpravou doladit i pro přidávání šířek jednotlivým položkám.
Za jakýkoliv komentář neb o připomínku budu vděčný, díky :)

čtěte více