SOLVED - Οριζόντιο μενού που ξεδιπλώνει προς τα πάνω

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

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

Απάντηση
Άβαταρ μέλους
ideal
Δημοσιεύσεις: 302
Εγγραφή: 12 Φεβ 2011 16:26

SOLVED - Οριζόντιο μενού που ξεδιπλώνει προς τα πάνω

Δημοσίευση από ideal » 22 Μαρ 2012 16:01

Επειδή δεν έχω ξαναασχοληθεί με jQuery έφτιαξα ένα μενού, αλλά μου λείπει ένα μέρος.
Το μενού που έχω αντί να είναι ξεδιπλώνει προς τα κατω ξεδιπλωνει προς τα πανω (το οποιο θελω να γινεται).
Όταν πηγαίνω σε ένα link ανοίγει σωστά.
Όρισα μία ευρυτερη περιοχη ένα div "allMenuContent" η οποια περιλαμβανει το μενού και το υπομενου.
Σκεφτηκα λοιπον οτι οταν γινεται mouseout από το div "allMenuContent" τοτε να κλεινει το μενου.
Το προβλημα είναι όταν φεύγω απο τα link κάποιες φορές μένει ανοικτό, άλλες φορές κλεινει. Τι πρεπει να φτιαξω;

Παραθέτω όλο τον κώδικα:

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

<!DOCTYPE html>
<html>
<head>
<style>
body&#123;
height&#58;400px;
&#125;
#myDiv, #notMe &#123;
	width&#58; 90px;
	height&#58; 90px;
	float&#58;left;
	padding&#58; 5px;
	margin&#58; 5px;
	background-color&#58; #EEEEEE;
&#125;

#menu &#123;
	background-color&#58; #F0F0F0 ;
	width&#58; 500px ;
	bottom&#58; 100px ;
	left&#58; 20px ;
	padding&#58; 0px 0px 0px 40px ;
	position&#58; fixed ;
	color&#58;red;
	z-index&#58;1;
&#125;

#menu a&#123;
	width&#58;80px;
	float&#58;left;
&#125;

#slider &#123;
	background-color&#58; #F0F0F0 ;
	width&#58; 500px ;
	padding&#58; 20px 0px 20px 40px ;
	border&#58; 1px solid #333333 ;
	border-bottom-width&#58; 0px ;
	bottom&#58; 100px ;
	display&#58; none ;
	left&#58; 20px ;
	position&#58; fixed ;
	color&#58;red;
&#125;
 
#sliderinner &#123;
	background-color&#58; #F0F0F0 ;
	color&#58;red;
&#125;

.submenu &#123;
	width&#58;80px;
	color&#58;green;
	float&#58;left;
&#125;
.submenu a&#123;
	color&#58;blue;
&#125;

.submenu a&#58;hover&#123;
	color&#58;yellow;
&#125;
</style>

<script src="http&#58;//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="allmenucontent">
	<div id="menu">
		<a href="#">Link1</a>
		<a href="#">Link2</a>
		<a href="#">Link3</a>
		<a href="#">Link4</a>
	</div>
	<div id="slider">
		<div id="sub1" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
				<a href="#">Link3</a><br/>
				<a href="#">Link4</a><br/>
			</div>
		</div>
		<div id="sub2" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
				<a href="#">Link3</a><br/>
			</div>
		</div>
		<div id="sub3" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
			</div>
		</div>
		<div id="sub4" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
				<a href="#">Link3</a><br/>
				<a href="#">Link4</a><br/>
				<a href="#">Link5</a><br/>
			</div>
		 
		</div>
	</div>
</div>
<script>

//"Μενού Άνοιξε"
$&#40;"#menu a"&#41;.mouseover&#40;function &#40;&#41; &#123;
	if&#40;$&#40;"#slider"&#41;.is&#40;"&#58;visible"&#41;&#41;&#123;
		$&#40;"#slider"&#41;.stop&#40;&#41;;
	&#125;else&#123;
	$&#40;"#slider"&#41;.slideDown&#40; 500 &#41;;
	&#125;
&#125;&#41;;

//"Μενού Κλείσε"
$&#40;"#allmenucontent"&#41;.mouseout&#40;function &#40;&#41; &#123;
	$&#40;"#slider"&#41;.slideUp&#40; 500 &#41;;
&#125;&#41;;
</script>


</body>
</html>
Τελευταία επεξεργασία από το μέλος ideal την 28 Μαρ 2012 17:27, έχει επεξεργασθεί 2 φορές συνολικά.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

SOLVED - Οριζόντιο μενού που ξεδιπλώνει προς τα πάνω

Δημοσίευση από alou » 22 Μαρ 2012 18:20

Καλύτερα να χρησιμοποιήσεις την hover() κάπως έτσι

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

$&#40;"#menu a"&#41;.hover&#40;function &#40;&#41; &#123;
    $&#40;"#slider"&#41;.slideDown&#40; 500 &#41;; 
  &#125;, 
  function &#40;&#41; &#123;
    $&#40;"#slider"&#41;.slideUp&#40; 100 &#41;; 
  &#125;
&#41;;

αν θες να ανοιγοκλείνει σε κάθε menu item αλλιώς κάντο στο container του menu

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

$&#40;"#allmenucontent"&#41;.hover&#40;function &#40;&#41; &#123;
    $&#40;"#slider"&#41;.slideDown&#40; 500 &#41;; 
  &#125;, 
  function &#40;&#41; &#123;
    $&#40;"#slider"&#41;.slideUp&#40; 100 &#41;; 
  &#125;
&#41;;

αν και με έχεις μπερδέψει με την html και δεν είμαι σίγουρος ακριβώς τι έχεις κάνει.

Άβαταρ μέλους
ideal
Δημοσιεύσεις: 302
Εγγραφή: 12 Φεβ 2011 16:26

SOLVED - Οριζόντιο μενού που ξεδιπλώνει προς τα πάνω

Δημοσίευση από ideal » 22 Μαρ 2012 19:41

Νομιζα το ειχα δοκιμασει... Το 2ο είναι οτι ακριβως πρπει!
By the way ωραίο το μενού της σελίδας σου. Μου άρεσε! Ειναι διασκεδαστικο.
Ευχαριστώ!

Άβαταρ μέλους
ideal
Δημοσιεύσεις: 302
Εγγραφή: 12 Φεβ 2011 16:26

SOLVED - Οριζόντιο μενού που ξεδιπλώνει προς τα πάνω

Δημοσίευση από ideal » 27 Μαρ 2012 03:00

Ταλαιπωρηθηκα πολυ με το slide και το γυρισα στο animate(). Ομως κι εδώ παρουσιασε προβλημα.
Που ακριβώς; Όταν περνάμε με ταχύτητα επάνω από τα LinkA και LinkB και σταματάμε στο LinkC παραμένουν ανοικτά Α και Β με αποτέλεσμα να μη λειτουργει σωστα. Το ίδιο συμβαινει και για τα 4 (A,B,C,D).
Προσπάθησα να τα κάνω hide αλλά δεν τα καταφερα.
Μπορει καποιος να το διορθωσει; Ειναι εξω απο τα νερα μου...αλλα δεν ηθελα να χρησιμοποιησω Flash.
Σας παραθετω ολο το κοματι κωδικα.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Προσπαθωντας με το Μενου</title>

<script src="jquery-1.7.1.min.js"></script>

<style type="text/css">
#backanimate&#123;
	width&#58;100%;
	height&#58;200px;
	background-color&#58;#999;
	top&#58;120px;
	display&#58;none;
	position&#58;absolute;
&#125;

#navigation&#123;
	width&#58;100%;
	height&#58;30px;
	background-color&#58;#999;
	position&#58;absolute;
	margin-top&#58;300px;
	padding-top&#58;10px;
&#125;

#navigation ul&#123;
	margin&#58;0px;
	padding&#58;0px;
	position&#58;absolute;
&#125;

#navigation ul li&#123;
	display&#58;inline;
	height&#58;30px;
	float&#58;left;
	list-style&#58;none;
	margin-left&#58;25px;
	position&#58;relative;
&#125;

#navigation li a&#123;
	color&#58;#fff;
	text-decoration&#58;none;
&#125;

.all&#123;
	margin&#58;0px;
	padding&#58;0px;
	display&#58;none;
	position&#58;absolute;
	left&#58;-25px;
	top&#58;-120px;
&#125;

.big&#123;
	margin&#58;0px;
	padding&#58;0px;
	display&#58;none;
	position&#58;absolute;
	left&#58;-25px;
	top&#58;-180px;
&#125;

.small&#123;
	margin&#58;0px;
	padding&#58;0px;
	display&#58;none;
	position&#58;absolute;
	left&#58;-25px;
	top&#58;-60px;
&#125;

#navigation li li&#123;
	min-width&#58;200px;
	list-style&#58;none;
	display&#58;list-item;
&#125;

</style>


</head>

<body>
<div id="backanimate"></div>
<div id="navigation">
	<ul id="menu">
		<li>
			<a href="#">Link</a>
		</li>
		
		<li>
			<a href="#">Link</a>
		</li>

		<li id="A">
		<a href="#">LinkA</a>
			<ul class="all">
			   <li><a href="#">LinkA</a></li>
			   <li><a href="#">LinkA</a></li>
			   <li><a href="#">LinkA</a></li>
			   <li><a href="#">LinkA</a></li>
			</ul>
		</li>

		<li id="B">
		<a href="#">LinkB</a>
			<ul class="all">
			   <li><a href="#">LinkB</a></li>
			   <li><a href="#">LinkB</a></li>
			   <li><a href="#">LinkB</a></li>
			   <li><a href="#">LinkB</a></li>
			</ul>
		</li>

		<li id="C">
		<a href="#">LinkC</a>
			<ul class="big">
			   <li><a href="#">LinkC</a></li>
			   <li><a href="#">LinkC</a></li>
			   <li><a href="#">LinkC</a></li>
			   <li><a href="#">LinkC</a></li>
			   <li><a href="#">LinkC</a></li>
			   <li><a href="#">LinkC</a></li>
			</ul>
		</li>
		
		<li id="D">
			<a href="#">LinkD</a>
			<ul class="small">
			   <li><a href="#">LinkD</a></li>
			   <li><a href="#">LinkD</a></li>
			</ul>
		</li>
		
		<li>
			<a href="#">Link</a>
		</li>
		
	</ul>
</div>
<script>
//Εδώ εμφανίζει το Animated Bg όταν πάμε επάνω στο αντίστοιχο <li> με hover. Σβήνει όταν απομακρυνόμαστε από το <li>.
$&#40;"#A"&#41;.hover&#40;function &#40;&#41; &#123;
	$&#40;"#backanimate"&#41;.stop&#40;&#41;;
    $&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"140px", top&#58;"180px",opacity&#58; 1&#125;, 500 &#41;;
	$&#40;"#backanimate"&#41;.fadeIn&#40;500&#41;;
  &#125;, 
  function &#40;&#41; &#123; 
	$&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"0px",top&#58;"320px",opacity&#58; 1&#125;, 700 &#41;;
  &#125;
&#41;; 

$&#40;"#B"&#41;.hover&#40;function &#40;&#41; &#123;
	$&#40;"#backanimate"&#41;.stop&#40;&#41;;
    $&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"140px", top&#58;"180px",opacity&#58; 1&#125;, 500 &#41;;
	$&#40;"#backanimate"&#41;.fadeIn&#40;500&#41;;
  &#125;, 
  function &#40;&#41; &#123; 
	$&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"0px",top&#58;"320px",opacity&#58; 1&#125;, 700 &#41;;
  &#125;
&#41;; 

$&#40;"#C"&#41;.hover&#40;function &#40;&#41; &#123;
	$&#40;"#backanimate"&#41;.stop&#40;&#41;;
    $&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"190px", top&#58;"120px",opacity&#58; 1&#125;, 500 &#41;;
	$&#40;"#backanimate"&#41;.fadeIn&#40;500&#41;;
  &#125;, 
  function &#40;&#41; &#123; 
	$&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"0px",top&#58;"320px",opacity&#58; 1&#125;, 700 &#41;;
  &#125;
&#41;;

$&#40;"#D"&#41;.hover&#40;function &#40;&#41; &#123;
	$&#40;"#backanimate"&#41;.stop&#40;&#41;;
    $&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"70px", top&#58;"250px",opacity&#58; 1&#125;, 500 &#41;;
	$&#40;"#backanimate"&#41;.fadeIn&#40;500&#41;;
  &#125;, 
  function &#40;&#41; &#123; 
	$&#40;"#backanimate"&#41;.animate&#40;&#123;height&#58;"0px",top&#58;"320px",opacity&#58; 1&#125;, 700 &#41;;
  &#125;
&#41;;

//Εδώ εμφανίζει το Υπομενού όταν πάμε επάνω στο αντίστοιχο <li> με hover. Σβήνει όταν απομακρυνόμαστε.
$&#40;'ul#menu li'&#41;.hover&#40;function&#40;&#41; &#123;
		$&#40;'ul', this&#41;.delay&#40;500&#41;.fadeIn&#40;400&#41;;
	&#125;,
	function &#40;&#41; &#123;
		$&#40;'ul', this&#41;.hide&#40;&#41;;
	&#125;
&#41;;

</script>
</body>
</html>

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

SOLVED - Οριζόντιο μενού που ξεδιπλώνει προς τα πάνω

Δημοσίευση από nbc » 27 Μαρ 2012 12:05

Δεν είμαι σίγουρος τι θέλεις να κάνεις, καθώς ο κώδικας που δίνεις είναι για τη NASA. Εάν θέλεις ένα σύνηθες pull-down μενoυ, που αντί για down να είναι up, και να έχει και το εφεδάκι του, τότε δες το παρακάτω. Αν βγάλεις το "up" από το class, και αφήσεις σκέτο "hmenu", ισχύει το pull-down χωρίς άλλη αλλαγή.

Επίσης, το μενού λειτουργεί και χωρίς javascript.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Προσπαθωντας με το Μενου</title>

<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
*
    &#123;
    margin      &#58; 0;
    padding     &#58; 0;
    &#125;
body
    &#123;
    width       &#58; 976px;
    margin      &#58; 0 auto;
    &#125;
p.spacer
    &#123;
    padding-top &#58; 200px;
    clear       &#58; both;
    &#125;
    
ul.hmenu 
    &#123;
    position    &#58; relative;
    &#125;
ul.hmenu li
    &#123;
    position    &#58; relative; 
    float       &#58; left;
    list-style  &#58; none;
    background  &#58; silver;
    &#125;
ul.hmenu li ul li
    &#123;
    float       &#58; none;
    &#125;
ul.hmenu li a
    &#123;
    display     &#58; block;
    padding     &#58; 4px;
    text-decoration&#58; none;
    &#125;
ul.hmenu li ul
    &#123;
    position    &#58; absolute;
    top         &#58; -999em;
    &#125;
ul.hmenu li&#58;hover ul
    &#123;
    top         &#58; 100%;
    &#125;
ul.hmenu.up li&#58;hover ul
    &#123;
    bottom      &#58; 100%;
    top         &#58; auto;
    &#125;
ul.hmenu a&#58;hover
    &#123;
    background  &#58; yellow;
    &#125;
</style>

<script>
    jQuery&#40;document&#41;.ready&#40;function&#40;$&#41;
    &#123;
        $&#40;"ul.hmenu"&#41;.each&#40;function&#40;&#41;
        &#123;
            $&#40;this&#41;.children&#40;&#41;.hover
            &#40;
                function&#40;&#41;&#123;$&#40;this&#41;.find&#40;'ul&#58;first'&#41;.stop&#40;true,true&#41;.slideDown&#40;&#41;;&#125;,
                function&#40;&#41;&#123;$&#40;this&#41;.find&#40;'ul&#58;first'&#41;.stop&#40;true,true&#41;.slideUp&#40;&#41;;&#125;
            &#41;.find&#40;'ul'&#41;.hide&#40;&#41;;
        &#125;&#41;;
    &#125;&#41;;
</script>

</head>

<body>
    <p class="spacer"></p>
    <ul class="hmenu up">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a>
            <ul>
            <li><a href="#">Link21</a></li>
            <li><a href="#">Link22</a></li>
            </ul>
            </li>
        <li><a href="#">Link3</a>
            <ul>
            <li><a href="#">Link31</a></li>
            <li><a href="#">Link32</a></li>
            <li><a href="#">Link33</a></li>
            </ul>
            </li>
        <li><a href="#">Link4</a>
            <ul>
            <li><a href="#">Link41</a></li>
            <li><a href="#">Link42</a></li>
            <li><a href="#">Link43</a></li>
            <li><a href="#">Link44</a></li>
            </ul>
            </li>
        <li><a href="#">Link5</a></li>
    </ul>
</body>
</html>

Άβαταρ μέλους
ideal
Δημοσιεύσεις: 302
Εγγραφή: 12 Φεβ 2011 16:26

SOLVED - Οριζόντιο μενού που ξεδιπλώνει προς τα πάνω

Δημοσίευση από ideal » 28 Μαρ 2012 17:32

Ευχαριστώ πολύ! Πράγματι δεν είναι για NASA...απλά για μένα ήταν λίγο σύνθετο αυτό. Για αυτό ζήτησα βοήθεια άλλωστε...
Δεν μπορούμε να λύσουμε τα προβλήματά μας χρησιμοποιώντας τον ίδιο τρόπο σκέψης που χρησιμοποιήσαμε όταν τα δημιουργήσαμε. -Α. Einstein

Rent a Car

Απάντηση

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

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

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