SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member phatnugs's Avatar
    Join Date
    Jul 2006
    Location
    Nashvegas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover Img w/ reveal menu's

    Hi all, Almost have this working. It works great on the mac (safari, firefox, IE) on the pcIE it's a different story of course. I've included the suckerfish javaSCRIPT for the rollover reveals. But now when it reveals on iePC it also reveals the image for the rollovers that i have for the buttons. What i'm trying to accomplish here is to keep the rollover state when you mouse over the reveals. I'm not sure this is even possible. below is the code:

    The CSS:

    Code:
    /* Menu Container */
    
    #menu {
    	width: 110px;
    	height: 400px;
    	background-color: #dbe7f4;
    	float: right;
    }
    html>body #menu {
    	width: 112px;
    	height: 400px;
    	background-color: #dbe7f4;
    	float: right;
    }
    
    #menu ul {
    	padding:0 0 0 2px; 
    	margin:0;
    	list-style-type: none; 
    }
    #menu ul li {
    	margin-right:5px; 
    	position:relative;
    }
    #menu ul li ul {
    	display: none;
    	padding: 0px
    }
    
    
    #menu ul li:hover ul, #menu ul li.menuHover ul {
    	display: block;
    	position:absolute;
    	border: 2px solid #3b7dc2;
    	left: -2px; 
    	width:150px;
    	background: #dbe7f4;
    	z-index: 100;
    }
    
    html>body #menu ul li:hover ul, #menu ul li.menuHover ul {
    	display: block;
    	position:absolute;
    	border: 2px solid #3b7dc2;
    	left:20px; 
    	width:150px;
    	background: #dbe7f4;
    	z-index: 100;
    }
    
    #menu ul li:hover ul li ul {
    	display: none;
    }
    #menu ul li:hover ul li a {
    	display: inline;
    	width: 100%;
    	height: auto;
    	padding: 3px;
    	color: #660000;
    	background: none;
    
    }
    #menu ul li:hover ul li a:hover {
    background:#3b7dc2; 
    color:#33FF99;
    }
    
    #menu p {
    	margin-top: -13px;
    	line-height: 17px;
    	font-size: 13px;
    
    }
    
    /* About Rollover*/
    
    #about li a {
    	width:20px; 
    	height:400px; 
    	background-image: url(images/aboutSTAT.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	padding-right: 2px ;
    	
    	}
    	
    
    #about li a:hover {
    		background-image: url(images/aboutACT.jpg);
    	
    }
    The HTML:

    Code:
    <script type="text/javascript">
       <!--
       menuHover = function() {
       		var navRoot = document.getElementById("menu").getElementsByTagName("li");
       		for (var i=0; i<navRoot.length; i++) {
       			navRoot[i].onmouseover=function() {
       				this.className+=" menuHover";
       			}
       			navRoot[i].onmouseout=function() {
       		    	this.className=this.className.replace(new RegExp(" menuHover\\b"), "");
       			}
       		}
       }
       if (window.attachEvent) window.attachEvent("onload", menuHover);
       //-->
       </script>
    <div id="menu">
    <div id="about"> 
    <ul>
             <li><a href="#"></a> 
                <ul>
    			<li>
                  <p><a href="#">Origins &amp; Objectives</a></p>
                  <p><a href="#">Faculty</a></p>
                  <p><a href="#">Locations</a></p>
                </li>
                </ul>
              </li>
    </ul>
    </div>
    </div>
    any help would be greatly appreciated i've been wrestling with this for awhile now. Got it to finally WORK, now i need to tweak it.
    Last edited by phatnugs; Sep 22, 2006 at 04:35.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I'd need to see a link to understand properly what the problem is.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Dude, and that's javascript, not java.

  4. #4
    SitePoint Member phatnugs's Avatar
    Join Date
    Jul 2006
    Location
    Nashvegas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the link

    I know i need adjustments with spacing and all that, but i can't seem to get rid of the background images in the reveal box.

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

    You have a lot of unneccesary stuff in there and why have you wrapped the lists in divs. You should use nested lists and theres no need to add p tags in there either because they are still lists and should be in list tags.

    This works in ie and firefox although I'm not keen on the usuablity of this menu.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
       <!--
       menuHover = function() {
    		   var navRoot = document.getElementById("menu").getElementsByTagName("li");
    		   for (var i=0; i<navRoot.length; i++) {
    			   navRoot[i].onmouseover=function() {
    				   this.className+=" menuHover";
    			   }
    			   navRoot[i].onmouseout=function() {
    				   this.className=this.className.replace(new RegExp(" menuHover\\b"), "");
    			   }
    		   }
       }
       if (window.attachEvent) window.attachEvent("onload", menuHover);
       //-->
       </script>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <title>Untitled Document</title>
    <style type="text/css">
    /* CSS Document */
    * html a:hover
    {
    visibility:visible
    }
    
    
    
    body {
    	margin: 0;
    	padding: 0;
    	}
    body, pre, input, textarea, select {
    	background-color: #CCCCCC;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	}
    
    a:link,
    a:active {
    	color:#99CCFF;
    	text-decoration: none;
    	}
    a:visited {
    	color: #1a5180;
    	text-decoration: none;
    	}
    a:hover {
    	text-decoration: underline;
    	}
    	
    
    	
    	
    #container {
    	width: 700px;
    	margin: 20px auto 40px auto;
    	background-color:#3b7dc2;					/* Medium Blue */
    	}
    
    #banner {
    	background-image:url(http://www.mikepetruna.com/test/images/mast.jpg);
    	border-top: 2px solid #3b7dc2;				/* Medium Blue */
    	border-bottom: 2px solid #1a5180;			/* Dark Blue */
    	height: 73px;
    	position: om
    	}
    	
    #main {
    	background-color:#3b7dc2;					/* Medium Blue */
    width:700px;
    overflow:hidden;/* clear floats*/
    	
    	}
    	
    #mainText p {
    	font-size: 11px;
    	color: #fff;
    	margin: 10px 20px 5px 20px;
    	padding: 0px 10px 0px 0px;
    	
    	}
    	
    #main h1 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 15px;							
    	color: #6fa0d2;								/* Light Blue */
    	text-transform: uppercase;
    	border-bottom: 1px solid #6fa0d2;
    	margin: 0px 20px 0px 0px;
    	padding: 20px 10px 0px 20px;
    	}
    #main h2 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 13px;							
    	color: #1a5180;							
    	margin: 0px 20px 0px 0px;
    	padding: 10px 10px 0px 20px;
    	}
    	
    #content {
    float: left;
    
    }	
    	
    a.content:link,
    a.content:active {
    	font-weight: bold;
    	color: #CCCC99;
    	text-decoration: none;
    	}
    a.content:visited {
    	color:#CCCCCC;
    	font-weight: bold;
    	text-decoration: none;
    	}
    a.content:hover {
    	text-decoration: underline;
    	font-weight: bold;
    	}	
    	
    /* Menu Container */
    
    #menu {
    	width: 112px;
    	height: 400px;
    	background-color: #dbe7f4;
    	float: right;
    }
    
    #menu ul {
    	padding:0 0 0 2px; 
    	margin:0;
    	list-style-type: none; 
    	position:relative;
    	z-index:1
    }
    #menu li {
    	position:relative;
     float:left;
    }
    #menu ul li li {
    float:none;
    }
    #menu ul li a{
    	display:inline;
    	width:20px;
    	height:400px;
    	float:left;
    	margin-right:2px;
    	position:relative;
    	z-index:1
    }
    #menu ul li ul {
    	display: none;
    	padding: 0px;
    	height:auto;
    	position:absolute;
    	border: 2px solid #3b7dc2;
    	width:150px;
    	background: #dbe7f4;
    	z-index: 100;
    }
    #menu ul li:hover ul, #menu ul li.menuHover ul {
    	display: block;
    	top:0;
    	left:20px; 
    }
    #menu ul li:hover ul li ul,
    #menu ul li.menuHover ul li ul {
    	display: none;
    }
    #menu ul li:hover ul li a,
    #menu ul li.menuHover ul li a {
    	display: block;
    	padding: 3px;
    	color: #660000;
    	background: none;
    	height:auto;
    }
    #menu ul li:hover ul li a:hover,
    #menu ul li.menuHover ul li a:hover {
    background:#3b7dc2; 
    color:#33FF99;
    }
    
    #menu ul li ul li {
    	margin-top:0px;
    	line-height: 17px;
    	font-size: 13px;
    }
    
    /* About Rollover*/
    
    #about a{
    	background: url(http://www.mikepetruna.com/test/images/aboutSTAT.jpg) no-repeat left top;
    }
    #about a:hover,#about:hover a,#about.menuHover a{	
    background: url(http://www.mikepetruna.com/test/images/aboutACT.jpg);
    }
    /* Fellows Rollover*/
    
    #fellows a {
    	background: url(http://www.mikepetruna.com/test/images/fellowsSTAT.jpg) no-repeat left top;
    }
    #fellows a:hover,#fellows:hover a,#fellows.menuHover a{
    		background: url(http://www.mikepetruna.com/test/images/fellowsACT.jpg);	
    }
    /* Research Rollover */
    #research a {
    	background: url(http://www.mikepetruna.com/test/images/researchSTAT.jpg) no-repeat left top;
    }
    #research a:hover,#research:hover a,#research.menuHover a {
    		background: url(http://www.mikepetruna.com/test/images/researchACT.jpg);	
    }
    /* Outreach Rollover */
    #outreach a{
    	background: url(http://www.mikepetruna.com/test/images/outreachSTAT.jpg) no-repeat left top;
    }
    #outreach a:hover,#outreach:hover a,#outreach.menuHover a {
    		background: url(http://www.mikepetruna.com/test/images/outreachACT.jpg);	
    }
    /* partners Rollover */
    #partners a{
    	background: url(http://www.mikepetruna.com/test/images/partnersSTAT.jpg) no-repeat left top;
    }
    #partners a:hover,#partners:hover a,#partners.menuHover a {
    		background: url(http://www.mikepetruna.com/test/images/partnersACT.jpg);	
    }
    #about {z-index:6;}
    #fellows {z-index:5;}
    #research{z-index:4;}
    #outreach {z-index:3;}
    #partners{z-index:2;}
    
    #menu ul li ul li a{	
    	background:none!important;
    	height:auto;
    	width:150px;
    	float:none;
    	position:relative;
    }
    	
    	
    /* Footer */	
    #footer {
    	clear: both;
    	margin: 10px 0 0 0;
    	background-color: #CCCCCC;
    	border-top: 2px solid #1a5180;			/* light Gray */
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	color: #1a5180;
    	padding: 0px 0px 0px 332px ;
    	}	
    #footer a{
    	background-color: #CCCCCC;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	color: #1a5180;
    	}	
    	
    #footer a:link,
    #footer a:active,
    #footer a:visited {
    	text-decoration: none;
    	color:#1a5180;
    	display:inline;
    	}	
    #footer a:hover {
    	text-decoration: underline;
    	display:inline;
    	}
    	
    	
    /* Picture alignment */
    .picRight {
    	margin: 0px;
    	float: right;
    	}
    	
    
    .picLeft {
    	margin: 0px;
    	float: left;
    	}
    
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="main"> <img src="http://www.mikepetruna.com/test/images/sakura_pic.jpg" alt="sakura" class="picRight" />
    		<div id="menu">
    			<ul>
    				<li id="about"><a href="#"></a>
    					<ul>
    						<li><a href="#">Origins &amp; Objectives</a></li>
    						<li><a href="#">Faculty</a></li>
    						<li><a href="#">Locations</a></li>
    					</ul>
    				</li>
    				<li id="research"><a href="#"></a>
    					<ul>
    						<li><a href="#">Recent Projects</a></li>
    						<li><a href="#">Publications &amp; Working Papers</a></li>
    					</ul>
    				</li>
    				<li id="outreach"><a href="#"></a>
    					<ul>
    						<li> <a href="#">Fora</a></li>
    						<li><a href="#">Third Tuesday</a></li>
    						<li><a href="#">Seminars</a> </li>
    					</ul>
    				</li>
    				<li id="partners"><a href="#"></a> </li>
    			</ul>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Hope it helps


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
  •