drop down menu

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

drop down menu

Δημοσίευση από abeautifulmind » 24 Νοέμ 2011 21:59

Καλησπέρα σε όλους.
Έχω βρει ένα multilevel drop down menu και το έβαλα στο site μου.
Όμως έχω τεστάρει και βρει ένα bug. Αν οι τίτλοι από τα υπομενού είναι μεγάλοι τότε βγαίνουν έξω από την οθόνη στα δεξιά.
Νομίζω ότι υπάρχει μία εντολή στην javascript που υπολογίζει τις διαστάσεις της σελίδας και εμφανίζει ανάλογα το νέο υπομενού δεξιά ΄η αριστερά ώστε να μην βγαίνει απ'έξω.
Καμία λύση?
ο κώδικας:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Javascript Menu</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>

<style type="text/css">
.clear &#123; height&#58; 100% &#125;
.clear&#58;after &#123; content&#58; ''; display&#58; block; clear&#58; both &#125;

#menu, #menu ul &#123; list-style&#58; none; margin&#58; 0; padding&#58; 0 &#125;

#menu li &#123; background&#58; #bdd2ff; border-right&#58; 1px solid #fff; position&#58; relative; float&#58; left; white-space&#58; nowrap &#125;
#menu li a &#123; display&#58; block; padding&#58; 5px 20px; text-decoration&#58; none; color&#58; #13a &#125;

#menu ul &#123; background&#58; #fff; display&#58; none; position&#58; absolute &#125;
#menu ul li &#123; background&#58; #aabde6; border-top&#58; 1px solid #bdd2ff; border-right&#58; 0px solid transparent; float&#58; none &#125;

#menu ul ul &#123; top&#58; -1px; left&#58; 100% &#125;

#menu li.has_child &#123; background-image&#58; url&#40;'down.gif'&#41;; background-position&#58; right center; background-repeat&#58; no-repeat; padding-right&#58; 10px &#125;
#menu li.hover  &#123; background-color&#58; #cfdeff &#125;

#menu ul &#123; -webkit-box-shadow&#58; 3px 3px 4px #999; -moz-box-shadow&#58; 3px 3px 4px #999; box-shadow&#58; 3px 3px 4px #999 &#125;
</style>

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
	$&#40;'#menu'&#41;.menu&#40;&#41;;
&#125;&#41;;

var ie = $.browser.msie && $.browser.version < 8.0;
 
$.fn.menu = function&#40;&#41; &#123;
	$&#40;this&#41;.find&#40;'li'&#41;.each&#40;function&#40;&#41; &#123;
		if &#40;$&#40;this&#41;.find&#40;'> ul'&#41;.size&#40;&#41; > 0&#41; &#123;
			$&#40;this&#41;.addClass&#40;'has_child'&#41;;
		&#125;
	&#125;&#41;;

	var closeTimer = null;
	var menuItem = null;
	
	function cancelTimer&#40;&#41; &#123;
		if &#40;closeTimer&#41; &#123;
			window.clearTimeout&#40;closeTimer&#41;;
			closeTimer = null;
		&#125;
	&#125;
	
	function close&#40;&#41; &#123;
		$&#40;menuItem&#41;.find&#40;'> ul ul'&#41;.hide&#40;&#41;;
		ie ? $&#40;menuItem&#41;.find&#40;'> ul'&#41;.fadeOut&#40;&#41; &#58; $&#40;menuItem&#41;.find&#40;'> ul'&#41;.slideUp&#40;250&#41;;
		menuItem = null;
	&#125;
	
	$&#40;this&#41;.find&#40;'li'&#41;.hover&#40;function&#40;&#41; &#123;
		cancelTimer&#40;&#41;;
		
		var parent = false;
		$&#40;this&#41;.parents&#40;'li'&#41;.each&#40;function&#40;&#41; &#123; 
			if &#40;this == menuItem&#41; parent = true;
		&#125;&#41;;
		if &#40;menuItem != this && !parent&#41; close&#40;&#41;;
		
		$&#40;this&#41;.addClass&#40;'hover'&#41;;
		ie ? $&#40;this&#41;.find&#40;'> ul'&#41;.fadeIn&#40;&#41; &#58; $&#40;this&#41;.find&#40;'> ul'&#41;.slideDown&#40;250&#41;;
	&#125;, function&#40;&#41; &#123;
		$&#40;this&#41;.removeClass&#40;'hover'&#41;;
		menuItem = this;
		cancelTimer&#40;&#41;;
		closeTimer = window.setTimeout&#40;close, 500&#41;;
	&#125;&#41;;
	
	if &#40;ie&#41; &#123;
		$&#40;this&#41;.find&#40;'ul a'&#41;.css&#40;'display', 'inline-block'&#41;;
		$&#40;this&#41;.find&#40;'ul ul'&#41;.css&#40;'top', '0'&#41;;
	&#125;
&#125;
</script>

</head>

<body>

<ul id="menu" class="clear">
	<li><a href="#">Item 1</a>
		<ul>
			<li><a href="#">Item with a long title 1.1</a></li>
			<li><a href="#">Item 1.2</a></li>
			<li><a href="#">Item 1.3</a></li>
			<li><a href="#">Item 1.4</a></li>
		</ul>
	</li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a>
		<ul>
			<li><a href="#">Item with a very loooooooooooooooooooong title 4.1</a></li>
			<li><a href="#">Item 4.2</a>
				<ul>
					<li><a href="#">Item with a very long title 4.2.1</a></li>
					<li><a href="#">Item 4.2.2</a></li>
					<li><a href="#">Item 4.2.3</a></li>
					<li><a href="#">Item 4.2.4</a>
						<ul>
							<li><a href="#">Item with a very loooooooong title 4.2.3.1</a></li>
							<li><a href="#">Item 4.2.3.2</a></li>
							<li><a href="#">Item 4.2.3.3</a></li>
							<li><a href="#">Item 4.2.3.4</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Item 4.3</a></li>
			<li><a href="#">Item 4.4</a></li>
		</ul>
	</li>
           <li><a href="#">Item 1</a>
		<ul>
			<li><a href="#">Item with a long title 1.1</a></li>
			<li><a href="#">Item 1.2</a></li>
			<li><a href="#">Item 1.3</a></li>
			<li><a href="#">Item 1.4</a></li>
		</ul>
	</li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a>
		<ul>
			<li><a href="#">Item with a very loooooooooooooooooooong title 4.1</a></li>
			<li><a href="#">Item 4.2</a>
				<ul>
					<li><a href="#">Item with a very long title 4.2.1</a></li>
					<li><a href="#">Item 4.2.2</a></li>
					<li><a href="#">Item 4.2.3</a></li>
					<li><a href="#">Item 4.2.4</a>
						<ul>
							<li><a href="#">Item with a very loooooooong title 4.2.3.1</a></li>
							<li><a href="#">Item 4.2.3.2</a></li>
							<li><a href="#">Item 4.2.3.3</a></li>
							<li><a href="#">Item 4.2.3.4</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Item 4.3</a></li>
			<li><a href="#">Item 4.4</a></li>
		</ul>
	</li>
</ul>



</body>

</html>

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης