Forum PHP.pl > Menu rozciągające się do rozmiarów strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Menu rozciągające się do rozmiarów strony

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

wujek2009

1.05.2012, 14:36:07

Cześć.

Mamy menu, które admin może w każdej chwili rozbudować (czyli z 6 pozycji robi się np. 8 pozycji).
Chciałbym się zapytać czy jest już opracowany jakiś algorytm JS/CSS, który byłby w stanie dopasowywac się do rozdzielczości ("pojemnika") strony?

Proszę spojrzeć na screen pod tym adresem - to ułatwi zrozumienie mojego pytania ;-)

Algorytm musi wygenerować taki układ, aby te 6 pozycji z menu (str główna, artykuły, download, o nas, historia, kontakt) było rozciągniętę na te 980px - i oczywiście musi być również gotowe na rozbudowe menu czyli dodać np. dwie nowe pozycje.

hubson87

19.05.2012, 19:46:51

Tak na szybko z użyciem jQuery. (i jeżeli dobrze zrozumiałem o co Ci chodzi)
Wrzucam cały kod stronki żeby było Ci łatwiej przeanalizować

[HTML] pobierz, plaintext 
<!doctype html>
<html lang=pl>
	<head>
		<title>test5</title>
		<meta charset=utf-8>
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script>
		    $(document).ready(function() {
				var counter = 0;
					$('.item').each(function(){ //zliczamy ilosc elementow menu
						counter++;
					})
					var w = 980/counter-2;  // -2 bo border
					$('.item').css("width",w);// nadajemy szerokosc elementom
			});
		</script>
		<style>
			.item{
			height:100%;
			background:#0f0;
			float:left;
			border:1px solid #f00;
			}
		</style>
	</head>
	<body>
	<div style="width:980px; height:300px; margin:300px auto; background:#000">
		<div style="width:100%; height:60px;">
		<div class="item">menu</div>
		<div class="item">menu</div>
		<div class="item">menu</div>
		<div class="item">menu</div>
		<div class="item">menu</div>
		<div class="item">menu</div>
		</div>
	</div>
	</body>
</html>
[HTML] pobierz, plaintext

Pozdrawiam,

mitring

20.05.2012, 11:16:49

Zobacz jak działa: http://users.tpg.com.au/j_birch/plugins/superfish/ jest taka funkcjonalność, o którą pytasz

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.