No replies
mightyhokie
mightyhokie's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT-4
Joined: 2012-03-12
Posts: 1
Points: 2

the irony here is that i am trying to do what it seems every one else on the web is trying NOT to do, but i can't figure it out.

see the attached image:
what is supposed to happen:
- this is a navigation
- basically there are vertical boxes that expand width on hover. also the title of the page pops up under the corresponding box on hover(the chp home text) and stay centered to the expanding vertical box. then it goes back to the original width on exit. also please note the grey outline.
- as each box expands it should 'push' the other boxes. sort of like the Mac zoom navigation only with just width instead of width and height.
- finally, if you notice that the first box (chp home) is already expanded, it needs to stay that size until another nav box is selected, then it needs to reduce to the same size as all the others and the newly selected nav box should stay the expanded width.
(God I hope this makes sense!)

what is happening to me is that when you hover on the img div it does expand, but it doesn't 'push' the other divs. it just goes under the neighboring divs. i can see that the div that houses the box with the color, nib/image/ and title isn't expanding, which is prob why it isn't pushing the others. I know this is a lot of code and i apologize. if there is a better, more efficient way I'm all ears.

a img{
	outline:none;
	border:0px;
	}
 
 
/*                                                   	this houses the entire navgation, allows centering*/
#fullTopContainer{
	width:100%;
 
}
 
 
/*                                                  	container for the entire main nav  */
#mainNavContainer{
	width:985px;
	height:74px;
	background-color:#eeeeee; /* light gray  */
	margin:0px auto;
}
 
 
/* 														the container that has the grey outline for all colored boxes  */
#mainNavContainer #navOutline{
	width:100%;
	height:100%;
	border:solid 1px #CC3300;
	margin:0px auto;
	padding:2px;
}
 
 
 
 
 
/* 														container for the colored nav box, grey tick, and title as well as their containers  */
#mainNavContainer #navOutline .navBoxContainer{
	display:block;
	clear:none;
	float:left;
	position:relative;
	overflow:visible;
	background-color:#FF6600;
}
 
 
 
 
 
 
 
/* 														the vertical main menu element that is the link for the Home box  */
 
#mainNavContainer #navOutline .navBoxContainer .navColorBoxHome{
	width:30px;
	height:74px;
	float:left;
	padding:0px;
	margin:0px auto;
	overflow:visible;
	border:#000 1px solid;
}
#mainNavContainer #navOutline .navBoxContainer .navColorBoxHome a:link img{
	width:30px;
	height:74px;
	float:left;
	padding:0px;
	margin:0px auto;
	overflow:visible;
	-webkit-transition: all .2s ease-in-out;
 
}
#mainNavContainer #navOutline .navBoxContainer .navColorBoxHome a:hover img{
	width:70px;
	height:74px;
	clear:none;
	float:left;
	padding:0px;
	margin:0px auto;
	padding:0px;
	overflow:visible;
}
/* 														the vertical main menu element that is the link for the Sub box  */
#mainNavContainer #navOutline .navBoxContainer .navColorBoxSub {
	width:20px;
	height:74px;
	float:left;
	padding:0px;
	margin:0px auto;
	border:#000 1px solid;
}
/* 														the vertical main menu element that is the link for the Sub box  */
#mainNavContainer #navOutline .navBoxContainer .navColorBoxSub a:link img{
	width:20px;
	height:74px;
	float:left;
	padding:0px;
	margin:0px auto;
	-webkit-transition: all .2s ease-in-out;
}
/* 														the vertical main menu element that is the link for the Sub box  */
#mainNavContainer #navOutline .navBoxContainer .navColorBoxSub a:hover img{
	width:60px;
	height:74px;
	float:left;
	padding:0px;
	margin:0px auto;
}
 
 
 
/* 														colors for the vertical main menu element  */
#mainNavContainer #navOutline .navBoxContainer .navColorBoxHome img[alt^="chpHome01_color"]{
 
	background-color:#F90; /* ORANGE  */
}
 
#mainNavContainer #navOutline .navBoxContainer .navColorBoxSub img[alt^="chpHome02_color"]{
 
	background-color:#3F6; /* BRIGHT GREEN  */
}
 
#mainNavContainer #navOutline .navBoxContainer .navColorBoxSub img[alt^="chpHome03_color"]{
 
	background-color:#90F; /* PURPLE  */
}
 
 
 
 
/* 														container for nib and title  */
#mainNavContainer #navOutline .navBoxContainer .nibTitleContainer{
	width:100%;
	clear:none;
	float:left;
	overflow:visible;
	padding:7px 0px 0px 0px;
	visibility:hidden;
}
 
 
 
 
/* 														container for the grey tick  */
#mainNavContainer #navOutline .navBoxContainer .nibTitleContainer .navNibContainer{
	width:100%;
	height:3px;
	clear:both;
	float:left;
	position:relative;
	overflow:visible;
}
 
/* 														grey tick  */
#mainNavContainer #navOutline .navBoxContainer .nibTitleContainer .navNibContainer img{
	margin-left:49%;
	width:2px;
	height:3px;
	clear:none;
	float:left;
	position:relative;
}
 
 
 
 
/* 														container for the text for the titles  */
#mainNavContainer #navOutline .navBoxContainer .nibTitleContainer .mainNavTitleContainer{
	padding-top:3px;
	width:100px;
	float:left;
	clear:both;
	position:absolute;
	overflow:visible;
	margin:0%;
}
 
 
/* 														styles for the text for the titles  */
#mainNavContainer #navOutline .navBoxContainer .nibTitleContainer .mainNavTitleContainer .mainNavTitleOver{
	font-family:arial;
	font-size:.7em;
	color:#666;
	float:left;
	margin:auto 0px;
}
 
#mainNavContainer #navOutline .navBoxContainer .nibTitleContainer .mainNavTitleContainer .mainNavTitleSelected{
	font-family:arial;
	font-size:1em;
	color:#333;
}

and here is the html

<div id="fullTopContainer">
 
<!--																								container for the entire main nav-->
        		<div id="mainNavContainer">
 
 
<!--																								the container that has the grey outline for all colored boxes-->              
                			<div id="navOutline">
 
                           <!-- ***************************************************************************************************-->
 
<!--																								container for the colored nav box, grey tick, and title as well as their containers-->
 
 
                                                <div class="navBoxContainer">
 
        <!--																								the vertical main menu element that is the link  ORANGE-->                                        
                                                            <div class="navColorBoxHome" id="chpHome01">
                                                            	<a href="javascript:void(0)" onClick="go(this.parentNode.id)" onMouseOver="waxOn(this.parentNode.id)" onMouseOut="waxOff(this.parentNode.id)"><img src="../img/1x1_navBlank.png" width="100%" height="100%" alt="chpHome01_color" /></a>
                                                            </div><!--END navColorBoxHome-->
                                                            <div class="nibTitleContainer" id="chpHome01_title">
                                                                    <div class="navNibContainer">
                                                                        <a href="#"><img src="../img/1x1_navTick.png" width="1px" height="3px" /></a>
 
                                                                    </div><!--END nibTitleContainer-->
                                                                    <div class="mainNavTitleContainer">
                                                                            <div class="mainNavTitleOver">manny</div>
                                                                    </div>
                                                            </div><!--END nibTitleContainer-->
                                                </div><!--END navBoxContainer CHPHOME 01-->
 
 
                             <!-- ***************************************************************************************************-->
 
<!--																								container for the colored nav box, grey tick, and title as well as their containers-->
 
 
                                                <div class="navBoxContainer">
 
        <!--																								the vertical main menu element that is the link  ORANGE-->                                        
                                                            <div class="navColorBoxSub" id="chpHome02">
                                                            	<a href="javascript:void(0)" onClick="go(this.parentNode.id)" onMouseOver="waxOn(this.parentNode.id)" onMouseOut="waxOff(this.parentNode.id)"><img src="../img/1x1_navBlank.png" width="100%" height="100%" alt="chpHome02_color" /></a>
                                                            </div><!--END navColorBoxHome-->
                                                            <div class="nibTitleContainer" id="chpHome02_title">
                                                                    <div class="navNibContainer">
                                                                        <img src="../img/1x1_navTick.png" width="1px" height="3px" />
 
                                                                    </div><!--END nibTitleContainer-->
                                                                    <div class="mainNavTitleContainer">
                                                                            <div class="mainNavTitleOver">about chp</div>
                                                                    </div>
                                                            </div><!--END nibTitleContainer-->
                                                </div><!--END navBoxContainer CHPHOME 01-->
 
 
 
 
 
 
                            </div><!--END navOutline-->
 
 
                </div><!--end mainNavContainer-->
 
 
        </div><!--end fullTopContainer-->

AttachmentSize
nav.png16.47 KB