Πρόβλημα με mouseover σε menu και jquery

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από g_p » 11 Ιουν 2011 00:26

Γεια σας,

έχω φτιάξει ένα test menu me jquery αλλά μου εμφανίζει μία συμπεριφορά που δεν
μου αρέσει.

Έχω μία unordered list που περιλαμβάνει ένα list item (News) το οποίο εμπεριέχει δύο divs.

1.κάνοντας mouseover sto News το πράσινο div πρέπει να ανοίγει. (ΟΚ)

2.Κάνοντας όμως mouseover sta Home1,Home2 kai Home3 το πράσινο div δεν πρέπει να ανοίγει! (πρόβλημα εδω!!)

Θα μπορούσε κάποιος να μου πει τι πρέπει να κάνω για να το υλοποιήσω??

Παραθέτω κάτω τον κώδικα μου

Ευχαριστώ

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

<html>
<head>
<title>Menu Problem</title>

<style type="text/css">

#menuDiv&#123;
   width&#58;960px;
   background-color&#58;#009900;
	&#125;

#menu&#123;
	width&#58; 960px;
	position&#58;absolute;
	z-index&#58;10;
	float&#58; left;
	padding&#58; 0px;
	margin&#58;0px;
	font-size&#58;15px;
	font-family&#58;Arial;
	font-weight&#58;bold;	
	background&#58; black;
&#125;   
   
#menu li&#123;
   display&#58;inline;
&#125;

#menu li a&#58;link
&#123;
	float&#58; left;
	color&#58; white;
	padding&#58; 10px 10px;
	text-decoration&#58; none;
	margin-left&#58;0px;
	color&#58;#FFFFFF;
&#125;





.submenu&#123;
	padding&#58; 0px;
	margin&#58;0px;
	float&#58; left;
	width&#58; 960px;
	font&#58; bold 13px Arial;
	background&#58; black; 
&#125;   

.submenu li&#123;

   display&#58;inline;  
&#125;

.submenu li a
&#123;
	float&#58; left;
	color&#58; white;
	padding&#58; 8px 30px;
	text-decoration&#58; none;	
	margin-left&#58;0px;
	&#125;


.submenu_News&#123;
	width&#58; 960px;
	float&#58; left;
	padding&#58; 0px;
	margin&#58;0px;	
	background-color&#58; blue;
	border-top&#58;1px solid red;
	font&#58; bold 12px Arial;

&#125;   

.submenu_News li&#123;
	display&#58;inline;  
&#125;

.submenu_News li a
&#123;
	float&#58; left;
	color&#58; white;
	padding&#58; 8px 8px;
	text-decoration&#58; none;
	border-right&#58;1px solid #FFFFFF;
	margin-left&#58;0px;
	
&#125;

.submenuNewsdiv&#123;
	
	width&#58;960px;
	height&#58;320px;
	float&#58;left;
	display&#58;none;
	background-color&#58;green;
	

&#125;

</style>

<body>
  <div id="menuDiv">	
	<ul id="menu">
      <li class="news">
		   <a href="#" style="background-color&#58;blue;margin-left&#58;180px;color&#58;#FFFFFF;padding&#58;15px">News</a>
           <div class="div_for_ul_and_submenuNewsDiv" style="display&#58;block;border&#58;2px solid red">            
				<ul class="submenu_News">
					<li><a href="#">Home1</a></li>
					<li><a href="#">Home2</a></li>
					<li><a href="#">Home3</a></li>
				</ul>
				
				
            	<div class="submenuNewsdiv">
                	test , kanontas mouseover MONO sto News thelo na emfanizetai to
					div auto, OXI kanontas mouseover sta Home1,Home2,Home3
				</div> <!-- submenuNewsdiv -->
          </div>  <!--   div_for_ul_and_submenuNewsDiv -->   
      </li>
   </ul>
   </div>

   
   
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;	
    
   $&#40;"#menuDiv #menu > li"&#41;.hover&#40;
													function&#40;&#41; &#123;
														$&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"block"&#125;&#41;
														 
													&#125;,
													function&#40;&#41; &#123;
														$&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"none"&#125;&#41;
														
													&#125;&#41;;
&#125;&#41;;													
   
</script>  
</body>


</html>

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6234
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από fafos » 11 Ιουν 2011 02:20

prepei na doseis ena id sto <a href="#" style="background-color:blue;margin-left:180px;color:#FFFFFF;padding:15px">News</a> (p.x. id="news" ) kai me auto na zhtas to hover ( $("#news").hover( ) )
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από g_p » 11 Ιουν 2011 02:55

fafos έγραψε:prepei na doseis ena id sto <a href="#" style="background-color:blue;margin-left:180px;color:#FFFFFF;padding:15px">News</a> (p.x. id="news" ) kai me auto na zhtas to hover ( $("#news").hover( ) )
Ευχαριστω για την απάντηση,
αυτό το έχω ήδη κάνει με mouseover kai mouseout,
το mouseover δουλεύει(δλδ,εμφανίζεται το πράσινο div),


αλλά sτο mouseout στο News το πράσινο div σβήνει...

Θέλω αφού φύγω από το News να μην σβήνει το πράσινο div παρά
μόνο όταν κάνω mouseout από το πράσινο div

Αυτό μπορεί να γίνει??

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6234
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από fafos » 11 Ιουν 2011 04:45

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

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;   
   
   $&#40;"#news"&#41;.hover&#40;
                                       function&#40;&#41; &#123;
                                          $&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"block"&#125;&#41;
 
                                          
                                       &#125;&#41;;
   $&#40;".submenuNewsdiv"&#41;.mouseout&#40;
                                       function&#40;&#41; &#123;
                                          $&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"none"&#125;&#41;
 
                                          
                                       &#125;&#41;;
&#125;&#41;;                                       
   
</script>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από g_p » 11 Ιουν 2011 14:44

Σ'ευχαριστώ πολύ, στο mouseover κάνει αυτό που θέλω,

μόνο στο mouseout έχω πρόβλημα και δεν ξέρω εάν γίνεται
αυτό που θέλω να υλοποιηθεί προγραμματιστικά


Έχω επισυνάψει ένα image και επεξηγώ πως θα ήθελα να είναι.
Το News box θεωρείται ένα block, ένα παραλληλόγραμμο που αποτελείται
από 4 πλευρές. Α, Β, C, D

Κάνοντας mouseout από τις πλευρες A, B kai C θέλω το πράσινο div να σβήνει...
(Πρόβλημα εδω... και δεν ξέρω εάν υλοποιείται προγραμματιστικά κιόλας)

Κάνοντας mouseout απο την πλευρά D το πράσινο div δεν σβήνει (OK αυτό είναι σωστό)

Ευχαριστώ
Συνημμένα
image.jpg
image gia mouseout menu sto jquery

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από g_p » 14 Ιουν 2011 12:53

Παιδιά καλημέρα,

θα μπορούσε κάποιος να με βοηθήσει γιατί έχω κολλήσει...?

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από Pantso » 14 Ιουν 2011 15:38

Γενικά υπάρχουν λάθη στα CSS και στα positionings οπότε έτσι όπως εμφανίζονται τα elements σου κάνουν την ζωή δύσκολη. Anyways

Σου άλλαξα λίγο το css και το select
Πρέπει να είσαι οκ τώρα

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

<!DOCTYPE html>
<html>
<head>
<title>Menu Problem</title>
<style type="text/css">
#menuDiv&#123;
   width&#58;960px;
   background-color&#58;#009900;
   margin-top&#58;45px;
   &#125;

#menu&#123;
   width&#58; 960px;
   position&#58;absolute;
   z-index&#58;10;
   float&#58; left;
   padding&#58; 0px;
   margin&#58;0px;
   font-size&#58;15px;
   font-family&#58;Arial;
   font-weight&#58;bold;   
   background&#58; black;
&#125;   
   
#menu li&#123;
   display&#58;inline;
&#125;

#menu li a&#58;link
&#123;
   float&#58; left;
   color&#58; white;
   padding&#58; 10px 10px;
   text-decoration&#58; none;
   margin-left&#58;0px;
   color&#58;#FFFFFF;
&#125;

.submenu&#123;
   padding&#58; 0px;
   margin&#58;0px;
   float&#58; left;
   width&#58; 960px;
   font&#58; bold 13px Arial;
   background&#58; black;
&#125;   

.submenu li&#123;

   display&#58;inline; 
&#125;

.submenu li a
&#123;
   float&#58; left;
   color&#58; white;
   padding&#58; 8px 30px;
   text-decoration&#58; none;   
   margin-left&#58;0px;
   &#125;


.submenu_News&#123;
   width&#58; 960px;
   float&#58; left;
   padding&#58; 0px;
   margin&#58;0px;   
   background-color&#58; blue;
   border-top&#58;1px solid red;
   font&#58; bold 12px Arial;

&#125;   

.submenu_News li&#123;
   display&#58;inline; 
&#125;

.submenu_News li a
&#123;
   float&#58; left;
   color&#58; white;
   padding&#58; 8px 8px;
   text-decoration&#58; none;
   border-right&#58;1px solid #FFFFFF;
   margin-left&#58;0px;
   
&#125;

.submenuNewsdiv&#123;
   
   width&#58;960px;
   height&#58;320px;
   float&#58;left;
   display&#58;none;
   background-color&#58;green;
   

&#125;

.test &#123;
background-color&#58;blue;
color&#58;#FFFFFF;
left&#58;180px;
padding&#58;15px;
position&#58;relative;
&#125;

</style>

<body>
  <div id="menuDiv">   
   <ul id="menu">
      <li class="news">
         <a class="test" href="#">News</a>
           <div class="div_for_ul_and_submenuNewsDiv" style="display&#58;block;border&#58;2px solid red">           
            <ul class="submenu_News">
               <li><a href="#">Home1</a></li>
               <li><a href="#">Home2</a></li>
               <li><a href="#">Home3</a></li>
            </ul>
            
			<div class="submenuNewsdiv">
                   test , kanontas mouseover MONO sto News thelo na emfanizetai to
               div auto, OXI kanontas mouseover sta Home1,Home2,Home3
            </div>
          </div>
      </li>
   </ul>
   </div>

<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;   
   
   $&#40;"#menu li "&#41;.hover&#40;
        function&#40;&#41; &#123;
            $&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"block"&#125;&#41;
        &#125;,
        function&#40;&#41; &#123;
             $&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"none"&#125;&#41;
        &#125;&#41;;
&#125;&#41;;                                       
   
</script> 
</body>
</html> 

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από g_p » 14 Ιουν 2011 20:02

Σ'ευχαριστώ πολύ,

έχει ακριβώς τη συμπεριφορά που πρεπει να έχει το "News",
απλά όταν κάνω mouseover στα "Home 1", "Home 2" και "Home 3" δεν πρέπει
να εμφανίζεται
το πράσινο div.

Αυτό γίνεται να υλοποιηθεί??
Κολλάω πολύ σ'αυτό το σημείο γιατί από τη μία κάνοντας mouseover στο "News"
το πράσινο div πρέπει να ανοίγει αλλά κάνοντας mouseover στην εμφωλευμένη
ul λίστα ( "Home 1", "Home 2" και "Home 3") το πράσινο div δεν πρέπει να εμφανίζεται...

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από Pantso » 15 Ιουν 2011 10:45

Άλλαξε το

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

.test &#123;
background-color&#58;blue;
color&#58;#FFFFFF;
left&#58;180px;
padding&#58;15px 15px 34px;
position&#58;relative;
&#125;
και κάνε τον selector σου

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

$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;   
   
   $&#40;"#menu li.news a.test, .submenuNewsdiv"&#41;.hover&#40;
        function&#40;&#41; &#123;
            $&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"block"&#125;&#41;
        &#125;,
        function&#40;&#41; &#123;
             $&#40;".submenuNewsdiv"&#41;.css&#40;&#123;"display"&#58;"none"&#125;&#41;
        &#125;&#41;;
&#125;&#41;;  
Απλά να προσθέσω ότι είναι "καγκουριά" γιατί η δομή δεν είναι και πολύ σωστή :P Απλά έτσι θα δουλέψει :D
Does not compute ... !
GreekTuts.net - Ελληνικά Βοηθήματα
VideoGamer.gr - Γιατί η ζωή είναι ένα παιχνίδι

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από g_p » 16 Ιουν 2011 11:42

Ευχαριστώ για την απάντηση,

αυτήν την λειτουργικότητα πρέπει να έχει το μενού
αλλά με position:absolute στο test.

Μα γιατί δεν "παίζει" με position:absolute αλλά μόνο με relative??

Απλά μέσα στο layout πρέπει να έχει position:absolute γιατί μετά χαλάνε
τα υπόλοιπα.

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Πρόβλημα με mouseover σε menu και jquery

Δημοσίευση από Pantso » 16 Ιουν 2011 11:51

Για να βάλεις absolute σε ένα στοιχείο, πρέπει να έχεις ορίσει position στο div/block που το περιέχει. Δοκίμασε λίγο και θα το βρείς !
Does not compute ... !
GreekTuts.net - Ελληνικά Βοηθήματα
VideoGamer.gr - Γιατί η ζωή είναι ένα παιχνίδι

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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