SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Showing hidden div's on mouseover - not quite going to plan

    Hi all,

    I am trying to put together a situation where a person rolls over a button and a hidden div appears, which in fairness is working, and then if I roll out of that hidden fiv it goes away, but the code blow as you will see if you follow the link, isnt working correctly.

    When I rollver 'Europe' yes the hidden div appears, but it goes away when I rollover one of the links in the div that appears.

    http://devchecksafetyfirst.csf.dcman....php?Country=5

    here is my code:

    Code:
    #country_Nav{
    position:relative; width:962px; height:32px; margin-top:3px; margin-bottom:3px; margin-left:auto; margin-right:auto;	
    }
    #top_Level_Nav1_Div{
    position:relative; width:158px; float:left;	background-color:#f5a323; height:32px; text-align:center;
    }
    #top_Level_Nav1_Div a:link{
    position:relative; color:#fff; height:32px; line-height:32px; text-align:center; text-decoration:none;
    }
    #top_Level_Nav1_Div a:visited{
    position:relative; color:#fff; height:32px; line-height:32px; text-align:center; text-decoration:none;
    }
    #top_Level_Nav1_Div a:hover{
    position:relative; color:#333; height:32px; line-height:32px; text-align:center; text-decoration:underline;
    }
    #top_Level_Nav1_Hidden{
    position:relative; height:80px; width:962px; margin-left:auto; margin-right:auto; background-color:#f5a323; margin-top:-3px; clear:both; margin-bottom:6px;	
    }
    
    
    <div id="country_Nav">
    
    <div id="top_Level_Nav1_Div">
    <a href="#" class="top_Level_Nav1" onmouseover="document.getElementById('top_Level_Nav1_Hidden').style.display = 'block';">EUROPE</a>
    </div>
    </div>
    
    <div id="top_Level_Nav1_Hidden" style="display:none;" onmouseout="document.getElementById('top_Level_Nav1_Hidden').style.display = 'none';">
    <? $d=mysql_query("select * from tbl_countries WHERE (Reg_Cntry='1') order by Nom_Cntry ASC");  
    while($f=mysql_fetch_assoc($d)){ ?> 
    <a href="result.php?Country=<?=$f['Id_Cntry']?>"><?=$f['Nom_Cntry']?></a>&nbsp;<span style="color:#333">|</span>&nbsp;
    <? } ?>
    </div>

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    You need to use the mouseleave event rather than mouseout (there's an explanation of the difference here: https://developer.mozilla.org/en-US/...nce/mouseleave).

    It would also be better to move these event bindings into your external .js file though, rather than mixing JS into your HTML. As you're already using jQuery, you could just add something like this:
    Code:
    $('div#top_Level_Nav1_Hidden').mouseleave(function(){ $(this).hide() });

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Of course you don't need js for something as simple as that anyway. It can be done in simple css.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { font-family:Arial, Helvetica, sans-serif }
    #country_Nav, #country_Nav ul {
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    #country_Nav {
    	min-height: 32px;
    	line-height:32px;
    	margin: 3px auto;
    	position: relative;
    	width: 962px;
    }
    #country_Nav > li > a {
    	color: #fff;
    	background:#F5A323;
    	height: 32px;
    	line-height: 32px;
    	width: 158px;
    	text-decoration: none;
    	display:block;
    	text-transform:uppercase;
    	text-align:center;
    }
    #country_Nav ul {
    	margin-left:-999em;
    	position:absolute;
    	left:0;
    }
    #country_Nav li:hover ul {
    	margin-left:0;
    	background:#F5A323;
    	padding:10px;
    	position:relative;
    }
    #country_Nav li li {
    	display:inline;
    	color:#666;
    }
    #country_Nav li li a:hover { color:#000 }
    </style>
    </head>
    
    <body>
    <ul id="country_Nav">
    		<li><a href="#">Europe</a>
    				<ul>
    						<li><a href="result.php?Country=64">Austria</a> | </li>
    						<li><a href="result.php?Country=62">Belgium</a> | </li>
    						<li><a href="result.php?Country=70">Bulgaria</a> | </li>
    						<li><a href="result.php?Country=40">Croatia</a> | </li>
    						<li><a href="result.php?Country=33">Cyprus</a> | </li>
    						<li><a href="result.php?Country=34">Czech Republic</a> | </li>
    						<li><a href="result.php?Country=56">France</a> | </li>
    						<li><a href="result.php?Country=35">Germany</a> | </li>
    						<li><a href="result.php?Country=29">Greece</a> | </li>
    						<li><a href="result.php?Country=59">Holland</a> | </li>
    						<li><a href="result.php?Country=63">Hungary</a> | </li>
    						<li><a href="result.php?Country=58">Italy</a> | </li>
    						<li><a href="result.php?Country=39">Montenegro</a> | </li>
    						<li><a href="result.php?Country=61">Portugal</a> | </li>
    						<li><a href="result.php?Country=1">Spain</a> | </li>
    						<li><a href="result.php?Country=38">Turkey</a> | </li>
    						<li><a href="result.php?Country=57">United Kingdom</a> | </li>
    				</ul>
    		</li>
    </ul>
    </body>
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I have just put your code into practice and it works really well.

    I will need to put a row of buttons next to the Europe one, horizontally in that space, so there shouldnt be any problems with that Im guessing.

    One little issue I did find, is that if you roll over 'Europe' and leave to the left its fine, but if you roll over 'Europe' and the roll out to the right its doesnt close.

    Everything else though is great, just need to sort of replicate it another 5 times.

    Thanks

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are making a dropdown menu effect they you are better off doing it like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { font-family:Arial, Helvetica, sans-serif }
    #country_Nav, #country_Nav ul {
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    #country_Nav {
    	min-height: 32px;
    	line-height:32px;
    	margin: 3px auto;
    	position: relative;
    	width: 962px;
    z-index:99;
    }
    #country_Nav > li {
    	width:158px;
    	margin:0 2px 0 0;
    	float:left;
    }
    #country_Nav > li > a {
    	color: #fff;
    	background:#F5A323;
    	height: 32px;
    	line-height: 32px;
    	width: 158px;
    	text-decoration: none;
    	display:block;
    	text-transform:uppercase;
    	text-align:center;
    }
    #country_Nav ul {
    	margin-left:-999em;
    	position:absolute;
    	left:0;
    	top:100%;
    	width:100%;
    }
    #country_Nav li:hover ul {
    	margin-left:0;
    	background:#F5A323;
    	padding:10px;
    }
    #country_Nav li li {
    	display:inline;
    	color:#666;
    }
    #country_Nav li li a:hover { color:#000 }
    </style>
    </head>
    
    <body>
    <ul id="country_Nav">
    		<li><a href="#">Europe</a>
    				<ul>
    						<li><a href="result.php?Country=64">Austria</a> | </li>
    						<li><a href="result.php?Country=62">Belgium</a> | </li>
    						<li><a href="result.php?Country=70">Bulgaria</a> | </li>
    						<li><a href="result.php?Country=40">Croatia</a> | </li>
    						<li><a href="result.php?Country=33">Cyprus</a> | </li>
    						<li><a href="result.php?Country=34">Czech Republic</a> | </li>
    						<li><a href="result.php?Country=56">France</a> | </li>
    						<li><a href="result.php?Country=35">Germany</a> | </li>
    						<li><a href="result.php?Country=29">Greece</a> | </li>
    						<li><a href="result.php?Country=59">Holland</a> | </li>
    						<li><a href="result.php?Country=63">Hungary</a> | </li>
    						<li><a href="result.php?Country=58">Italy</a> | </li>
    						<li><a href="result.php?Country=39">Montenegro</a> | </li>
    						<li><a href="result.php?Country=61">Portugal</a> | </li>
    						<li><a href="result.php?Country=1">Spain</a> | </li>
    						<li><a href="result.php?Country=38">Turkey</a> | </li>
    						<li><a href="result.php?Country=57">United Kingdom</a> | </li>
    				</ul>
    		</li>
    		<li><a href="#">Another</a>
    				<ul>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    				</ul>
    		</li>
    		<li><a href="#"> Another</a>
    				<ul>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    				</ul>
    		</li>
    		<li><a href="#">Another</a>
    				<ul>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
    				</ul>
    		</li>
    </ul>
    </body>
    </html>
    You don't really want the dropdown menu portion causing the page to jump up and down as that is a very awkward effect so you make the child an absolute element and it just overlaps the content when it pops out and makes for a smoother experience.

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ye thats sweet, thanks Paul...

    A little bit of styling of the css and that be perfect, and yes good advice on the jumping of the page, this is a lot better.

    Cheers

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    To keep the current tab when hovered the same colour as the dropdown portion to complete the tab effect use this code:

    Code:
    #country_Nav > li:hover a{background:#f57c1f}

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    One more thing, I am stylizing the buttons, and needed to have the rollover a different colour to create the effect, its great and works as you said, but there one little issue which I'm not sure there a way around it.

    When say you rollover Europ the drop down appears and you the roll into the drop down buttons, then roll over colour of the 'europe' button goes back to its no rollover colour which is then different from the drop down.

    I added a little bit to the css:

    Code:
    #country_Nav, #country_Nav ul {
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    #country_Nav {
    	min-height: 32px;
    	line-height:32px;
    	margin: 3px auto;
    	position: relative;
    	width: 962px;
    z-index:99;
    }
    #country_Nav > li {
    	width:158px;
    	margin:0 2px 0 0;
    	float:left;
    }
    #country_Nav > li > a {
    	color: #fff;
    	background:#F5A323;
    	height: 32px;
    	line-height: 32px;
    	width: 158px;
    	text-decoration: none;
    	display:block;
    	text-transform:uppercase;
    	text-align:center;
    }
    #country_Nav > li > a:hover {
    	color: #000;
    	background:#f57c1f;
    	height: 32px;
    	line-height: 32px;
    	width: 158px;
    	text-decoration: none;
    	display:block;
    	text-transform:uppercase;
    	text-align:center;
    }
    #country_Nav ul {
    	margin-left:-999em;
    	position:absolute;
    	left:0;
    	top:100%;
    	width:100%;
    }
    #country_Nav li:hover ul {
    	margin-left:0;
    	background:#f57c1f;
    	padding:10px;
    }
    #country_Nav li li {
    	display:inline;
    	color:#666;
    }
    #country_Nav li li a:hover { color:#000 }
    http://devchecksafetyfirst.csf.dcmanaged.com/

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I gave you a hint in post #7 but here's the full code for what I think you want.

    Code:
    #country_Nav > li:hover>a{
    background:#f57c1f;
    color:#fff;
    height:35px;
    }

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah right, you replied with an answer before i asked the question, lol, thanks.

    Looks great cheers.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    See my latest post #9 as it addresses the issue more specifically

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I also notice you are adding padding to the ul which makes it 20px too wide therefore you need ot reduce the width which is best done like this.

    Code:
    #country_Nav li:hover ul {
    width:auto;
    right:0px;
    }
    The width is set to auto so you can add as much padding as you like and then the width of the element is controlled by left:0 and right:0 (because its an absolute element)and will thus fill the available width of its parent.

  13. #13
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, really appreciated, it works fantastic.

    I think I need to catch up a bit on CSS as didnt think some of this would be possible, little did I know.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •