Forums

madhavaram123

Hello,

I need help in connecting the main menu right bottom border to the sub menu border and also the left border not connecting to main menu.

Here is my css,html and javascript code used and I am attaching the javascript file also.


.bluetabs{
}
.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.bluetabs li{
display: inline;
margin: 0;
}

.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #000;
color: #2d2b2b;
background: white url(media/bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
}

.bluetabs li a:visited{
color: #2d2b2b;
}

.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.bluetabs li.selected{
}

.bluetabs li.selected a{ /*selected main tab style */
background-image: url(media/bluetabactive.gif); /*THEME CHANGE HERE*/
border-bottom-color: white;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{
position:absolute;
top: 1;
border: 1px solid black; /*THEME CHANGE HERE*/
border-width: 1 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #000; 
border-bottom-width: 1px;
padding: 2px 0;
}

* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #fff;
}

.menudropdown {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 8px; PADDING-LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 8px; 
	BORDER-LEFT: #ccc 1px solid; WIDTH: 300px; PADDING-TOP: 8px; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BACKGROUND-COLOR: #fff
}

HTML Code


<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
<HEAD>
<TITLE>Tabs</TITLE>
	<script type=\"text/javascript\" src=\"dropdowntabs.js\"> </script>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"bluetabs.css\" />
</HEAD>
<BODY>

<div id=\"bluemenu\" class=\"bluetabs\">
	<ul>
	<li><a href=\"\" rel=\"dropmenu1_b\">Home</a></li>
	<li><a href=\"\" rel=\"dropmenu2_b\">Products</a></li>
	<li><a href=\"\" rel=\"dropmenu3_b\">Gallery</a></li>
	<li><a href=\"\" rel=\"dropmenu4_b\">Services</a></li>
	<li><a href=\"\" rel=\"dropmenu5_b\">Contact us</a></li>
	</ul>
</div>

<!--1st drop down menu -->                                                   
<div id=\"dropmenu1_b\" class=\"menudropdown\">
	<a href=\"javascript:void(0)\">Sub Home for Menu</a>
</div>

<!--2nd drop down menu -->                                                   
<div id=\"dropmenu2_b\" class=\"menudropdown\">
    <TABLE width=\"100%\">
			  <TBODY>
				  <TR>
					<TD><a href=\"javascript:void(0)\">About us</a></TD>
					<TD><a href=\"javascript:void(0)\">Mission</a></TD>
					<TD><a href=\"javascript:void(0)\">History</a></TD>
				  </TR>
				  <TR>
					<TD><a href=\"javascript:void(0)\">Careers</a></TD>
					<TD><a href=\"javascript:void(0)\">Team</a></TD>
					<TD><a href=\"javascript:void(0)\">Join us</a></TD>
				  </TR>
				</TBODY>
			</TABLE>
</div>

<!--3rd drop down menu -->                                                
<div id=\"dropmenu3_b\" class=\"menudropdown\">
	<TABLE width=\"100%\">
		  <TR>
			<TD><a href=\"javascript:void(0)\">Sub Gallery for Menu</a></TD>
		  </TR>
	</TABLE>
</div>

<!--4th drop down menu -->                                                
<div id=\"dropmenu4_b\" class=\"menudropdown\">
	<a href=\"javascript:void(0)\">Sub Services for Menu</a>
</div>

<!--4th drop down menu -->                                                
<div id=\"dropmenu5_b\" class=\"menudropdown\">
	<a href=\"javascript:void(0)\">Sub Contacts for Menu</a>
</div>

<script type=\"text/javascript\">
	tabdropdown.init(\"bluemenu\")
</script>
 
</BODY>
</HTML>

javascript code



var tabdropdown={
	disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
	disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
	enableiframeshim: 1, //1 or 0, for true or false

	//No need to edit beyond here////////////////////////
	dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
	currentpageurl: window.location.href.replace(\"http://\"+window.location.hostname, \"\").replace(/^\//, \"\"), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

	getposOffset:function(what, offsettype){
		var totaloffset=(offsettype==\"left\")? what.offsetLeft : what.offsetTop;
		var parentEl=what.offsetParent;
			while (parentEl!=null){
				totaloffset=(offsettype==\"left\")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
				parentEl=parentEl.offsetParent;
			}
		return totaloffset;
	},

	showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
		if (this.ie || this.firefox)
			this.dropmenuobj.style.left=this.dropmenuobj.style.top=\"-500px\"
		if (e.type==\"click\" && obj.visibility==hidden || e.type==\"mouseover\"){
			if (obj2.parentNode.className.indexOf(\"default\")==-1) //if tab isn't a default selected one
				obj2.parentNode.className=\"selected\"
			obj.visibility=\"visible\"
			}
		else if (e.type==\"click\")
			obj.visibility=\"hidden\"
	},

	iecompattest:function(){
		return (document.compatMode && document.compatMode!=\"BackCompat\")? document.documentElement : document.body
	},

	clearbrowseredge:function(obj, whichedge){
		var edgeoffset=0
		if (whichedge==\"rightedge\"){
			var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
			this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
		if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
			edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
		}
		else{
			var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
			var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
			this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
			if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
				edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
				if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
					edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
			}
			this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : \"1px\" //Add 1px top border to menu if dropping up
		}
		return edgeoffset
	},

	dropit:function(obj, e, dropmenuID){
		if (this.dropmenuobj!=null){ //hide previous menu
			this.dropmenuobj.style.visibility=\"hidden\" //hide menu
			if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
				if (this.previousmenuitem.parentNode.className.indexOf(\"default\")==-1) //If the tab isn't a default selected one
					this.previousmenuitem.parentNode.className=\"\"
			}
		}
		this.clearhidemenu()
		if (this.ie||this.firefox){
			obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
			obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
			this.dropmenuobj=document.getElementById(dropmenuID)
			this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
			this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
			this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
			this.showhide(this.dropmenuobj.style, e, obj)
			this.dropmenuobj.x=this.getposOffset(obj, \"left\")
			this.dropmenuobj.y=this.getposOffset(obj, \"top\")
			this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, \"rightedge\")+\"px\"
			this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, \"bottomedge\")+obj.offsetHeight+1+\"px\"
			this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
			this.positionshim() //call iframe shim function
		}
	},

	contains_firefox:function(a, b) {
		while (b.parentNode)
		if ((b = b.parentNode) == a)
			return true;
		return false;
	},

	dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
		var evtobj=window.event? window.event : e
		if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
			this.delayhidemenu(obj2)
		else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
			this.delayhidemenu(obj2)
	},

	delayhidemenu:function(obj2){
		this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
	},

	clearhidemenu:function(){
		if (this.delayhide!=\"undefined\")
			clearTimeout(this.delayhide)
	},

	positionshim:function(){ //display iframe shim function
		if (this.enableiframeshim && typeof this.shimobject!=\"undefined\"){
			if (this.dropmenuobj.style.visibility==\"visible\"){
				this.shimobject.style.width=this.dropmenuobj.offsetWidth+\"px\"
				this.shimobject.style.height=this.dropmenuobj.offsetHeight+\"px\"
				this.shimobject.style.left=this.dropmenuobj.style.left
				this.shimobject.style.top=this.dropmenuobj.style.top
			}
		this.shimobject.style.display=(this.dropmenuobj.style.visibility==\"visible\")? \"block\" : \"none\"
		}
	},

	hideshim:function(){
		if (this.enableiframeshim && typeof this.shimobject!=\"undefined\")
			this.shimobject.style.display='none'
	},

isSelected:function(menuurl){
	var menuurl=menuurl.replace(\"http://\"+menuurl.hostname, \"\").replace(/^\//, \"\")
	return (tabdropdown.currentpageurl==menuurl)
},

	init:function(menuid, dselected){
		this.standardbody=(document.compatMode==\"CSS1Compat\")? document.documentElement : document.body //create reference to common \"body\" across doctypes
		var menuitems=document.getElementById(menuid).getElementsByTagName(\"a\")
		for (var i=0; i<menuitems.length; i++){
			if (menuitems[i].getAttribute(\"rel\")){
				var relvalue=menuitems[i].getAttribute(\"rel\")
				document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName(\"a\")[0]
				menuitems[i].onmouseover=function(e){
					var event=typeof e!=\"undefined\"? e : window.event
					tabdropdown.dropit(this, event, this.getAttribute(\"rel\"))
				}
			}
			if (dselected==\"auto\" && typeof setalready==\"undefined\" && this.isSelected(menuitems[i].href)){
				menuitems[i].parentNode.className+=\" selected default\"
				var setalready=true
			}
			else if (parseInt(dselected)==i)
				menuitems[i].parentNode.className+=\" selected default\"
		}
	}

}

madhavaram123

Hello

By changing a bit of css I could able to get the borders around both the main and sub menu.

Is there any way I can combine both the menus and and show border around the whole.


.bluetabs{

}

.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.bluetabs li{
display: inline;
margin: 0;
}

.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #000;
color: #2d2b2b;
background: white url(media/bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
}

.bluetabs li a:visited{
color: #2d2b2b;
}

.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.bluetabs li.selected{
}

.bluetabs li.selected a{ /*selected main tab style */
background-image: url(media/bluetabactive.gif); /*THEME CHANGE HERE*/
border-bottom-color: #000;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{
position:absolute;
top: 1;
border: 1px solid black; /*THEME CHANGE HERE*/
border-width: 1 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #000; 
border-bottom-width: 1px;
padding: 2px 0;
}

* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #fff;
}

.menudropdown {
	BORDER-TOP: #000 1px solid; POSITION: absolute;
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 8px; PADDING-LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 8px; 
	BORDER-LEFT: #000 1px solid; WIDTH: 300px; PADDING-TOP: 8px; 
	BORDER-BOTTOM: #000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #fff
}

TheDoc

It is far easier to help you if you provide a link to the page(s) in question.

madhavaram123

Actually I am trying to build a menu something like www.ge.com

So, If any one can give me a working example it would be great.

I just want it to work in the same way as www.ge.com

Thanks in advance

treehouse : what would you like to learn today?

Forums

Need help in connecting the main and sub menu on Rollover