0

Hi All,

I designed one website useing div tags (its completed). for that website, left vertical menu is there for that i want use like switch type buttons can any one tell me how to do that.

And i know switch type menu but not like vertical menu bar. only i can give one link as a switch type but i want in that some links tobe switch type some should be normal links.
plzzzzzzzzzzzzzzzzzzzzzzzzz can any one help me in this.

thanq

6
Contributors
14
Replies
15
Views
10 Years
Discussion Span
Last Post by MidiMagic
0

I am not too sure if this will help but you can check out dynamic drive for a lot of really good free resources. The link to the switch menu is
here
hope this helps

0

ya i visited this link, but for my links i used images as background. i tryd in the same code to change how i want but no use.

0

Are you embedding the images? I think since you are using a list for the menu you can give them ids and you can then set the background images using css to call this ids.

0

Hi,

Here is the CSS code:

This is the css code i saved file as a style.css

body {
text-align: center;
background-color: #FFFFFF;
margin:1px 0px 0px 0px;
color:#333333;
}


A:link {
COLOR: #ba0001; text-decoration: none;
}
A:visited {
COLOR: #ba0001; text-decoration: none;
}
A:active {
COLOR: #ba0001; text-decoration: none;
}
A:hover {
COLOR: #ba0001; text-decoration: underline;
}


#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 1004px;
text-align: left;
background: #FFFFFF url('images/main-bg.jpg') top left repeat-y;
}


#page_header {
height: 82px;
background: #FFFFFF url('images/topbanner.jpg') bottom left no-repeat;
clear: both;
}


/* Start Main menu */
#menu{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
float:left;
height:16px;
}
#menu a{
float:left;
height:16px;
width:132px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn1.jpg) center center repeat-x;
}
#menu a:hover{
color:#FFFFFF;
}
#menu .current_page{
color:#FFFFFF;
}


#menu2{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu2 ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu2 li{
float:left;
height:16px;
}
#menu2 a{
float:left;
height:16px;
width:210px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn2.jpg) center center repeat-x;
}
#menu2 a:hover{
color:#FFFFFF;
}
#menu2 .current_page{
color:#FFFFFF;
}
/* End Main menu */


/* Start Left Side */
#left_side {
float:left;
width:205px;
}
#left_side h3 {
margin:0px 0px 0px 0px;
height:43px;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#FFFFFF;
padding:15px 4px 4px 70px;
border-right: 1px #999999 solid;
background-image:url(images/left-hed-bg.jpg);
background-repeat:repeat-x;
}
#left_side pre {
margin:0px 0px 20px 0px;
padding:0px 0px 0px 0px;
height:86px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
background-image:url(images/user-bg.jpg);
}
/*
.sign {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 130px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
}
*/
.outrline{
width:140px;
height:13px;
margin:10px 0px 0px 23px;
background-color:#FFFFFF;
border:1px solid #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
#left_side p {
margin-top:0px;
margin-bottom:0px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
color: #666666;
text-align: justify;
}
/* Start Left Menu */
#linklist {
padding-left: 0;
margin-left: 0;
border-bottom: 0px solid #666666;
display:block;
width: 200px;
height:10px;
line-height:15px;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
}
#linklist li {
width:183px;
height:10px;
list-style: none;
margin:0;
font-family:verdana;
font-size:11px;
line-height:15px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
}
#linklist li a {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #444343;
line-height:15px;
}
#linklist li a:hover {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #ba0001;
line-height:15px;
}
/* End Left Menu */


/* Start Left Links Menu */
.mainDiv{
width:200px;
}
.topItem{
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:left left;
background-repeat:no-repeat;
border: none;
width: 200px;
height: 10px;
color: #000000;
cursor:pointer;
text-indent:10px;
}
.topItemOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.topItemClose{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #000000;
cursor:pointer;
}
.topItemCloseOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.dropMenu{
font: 11px verdana;
background-color: #FFFFFF;
color: #000000;
border: 0px solid #FFFFFF;
border-width: 0px 0px 0px 0px;
filter:alpha(opacity=100);
padding-top:0px;
padding-bottom:0px;
}
.subMenu{
display:block;
}
.subItem{
margin-left:5px;
margin-top:2px;
height:10px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItem a{
margin-left:15px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItemOver{
margin-left:0px;
margin-top:2px;
font: 10px verdana;
height:10px;
color: #FF0112;
}
.subItemOver  a{
margin-left:20px;
font: 10px verdana;
cursor:pointer;
color: #FF0112;
text-decoration:none;
}
/* End Left Links Menu */


/* End Left Side */


#content_wrapper {
margin-top:5px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
border:0px dashed #FFFFFF;
}


/* Start Right Side */
#right_side {
float: right;
width:195px;
}
#right_side h3 {
margin:0px;
height:30px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #ffffff;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-hed-bg.jpg);
background-repeat: repeat-x;
}
#right_side p {
margin-top:5px;margin-bottom:15px;
padding:0px 5px 0px 5px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
line-height: 15px;
color: #333333;
text-align: left;
}
#right_side h5 {
margin:0px;
height:44px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #333333;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-sub-bg.jpg);
background-repeat: repeat-x;
}
/* End Right Side */


/* Start Center */
#center {
margin-left:200px;
margin-right:194px;
}
#center h3 {
height:79px;
margin:0px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #97be53 solid;
background-image: url(images/cntr-main-bg.jpg);
background-repeat: repeat-x;
}
#center p {
margin:0px 0px 0px 0px;
padding:7px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
text-align: justify;
}
.maintop{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
font-weight:normal;
line-height:12px;
text-align:left;
}
#center h6{
width:282px;
height:175px;
float:left;
margin:4px 2px 0px 6px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
text-align:left;
color: #ba0001;
padding:5px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban.jpg);
background-repeat: no-repeat;
}
#center h4{
width:285px;
height:175px;
margin:4px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px 2px 7px 7px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban2.jpg);
background-repeat: no-repeat;
}
#center h5{
height:170px;
margin:0px 0px 0px 7px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #FFFFFF solid;
background-image: url(images/cntr-btm-ban.jpg);
background-repeat: no-repeat;
}
#center A:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:underline;
padding:0px 0px 0px 350px;
}
/* End Center */


/* Start Footer */
#page_footer {
height:20px;
background:#e0dfdf;
clear:both;
}
#page_footer p {
padding-top:3px;
text-align:center;
font-family: verdana;
font-size: 10px;
line-height:14px;
color:#333333;
}
#page_footer2 {
height:15px;
background:#FFFFFF;
clear:both;
}


#page_footer A:link {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:visited {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:active {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:hover {
COLOR: #382f0c; text-decoration: underline
}
/* End Footer */



#menu_bar {
margin:0px;
padding:0px;
height:35px;
clear:both;
}


#content_wrapper {
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
border:0px dashed #FFFFFF;
}



#navcontainer ul {
padding-left: 0;
margin-left: 0;
margin-top:0px;
background: #32c721 url('img/bar.jpg') no-repeat top right;
color: #ffffff;
float: left;
width: 100%;
height: 35px;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform: uppercase;
}
#navcontainer ul li { display: inline; }


#navcontainer ul li a {
padding-top: 9px;
padding-bottom: 11px;
padding-left:10px;
padding-right:10px;
background-color: transparent;
color: #ffffff;
text-decoration: none;
float: left;
border-right: 1px #38bd07 solid;
}


#navcontainer ul li a:hover {
background: #3ade24 url('img/bar_bg_hover.jpg') repeat-x bottom left;
color: #1d2cff;
}


.thumbnail_left {
float:left;
margin-right:10px;
margin-bottom:5px;
border:0px;
}


.thumbnail_right {
float:right;
margin-left:10px;
margin-bottom:5px;
border:0px;
}



and HTML code is here:



<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<head>


<!-- Site Title -->
<title>f-bay...</title>


<!-- Style -->
<link href='style.css' type='text/css' rel='stylesheet' />
<script type="text/javascript" src="images/xpmenuv21.js"></script>
</head>



<body>


<div id='page_wrapper'>


<div id='page_header'>
</div>


<!-- Start Main Menu -->
<div id="menu">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ornaments</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Automobiles</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Miscellaneous</a></li>
<li><a href="#">&nbsp;&nbsp;Computer Hardware</a></li>
</ul>
</div>


<div id="menu2">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Property rentals available</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Matrimonial - Brides wanted</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Paying Guest facilities available</a></li>
</ul>
</div>
<!-- End Main Menu -->


<div id='content_wrapper'>


<!-- Start Left side -->


<!-- Start Left links -->
<div id='left_side'>
<ul id="linklist">
<li><a href="#" >Create Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#" >Search Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Advertisement</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">COO Speaks</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Leave Rules</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">List of Holidays 2008</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Obituary</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Focus Coimbatore Magazine</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Extracurricular Facilities</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Line Count Records of Focusites</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Accounts Documents</a></li>
<li><img src="images/left-div.jpg" /></li>
</ul>
<!-- End Left links -->


<h3>User Login</h3>


<pre><input type="text" name="textfield" class="outrline" />
<input type="text" name="textfield" class="outrline" />
Sign In
</pre>



<h3>My Links</h3>
<h3>News / Events</h3>


</div>
<!-- End Left side -->


<!-- Start Right side -->
<div id='right_side'>


<h3>About Company</h3>
<h5>Services</h5>
<p><img src="images/exp.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
<h5>Products</h5>
<p><img src="images/exp2.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
</div>
<!-- End right side -->


<!-- Start Center -->
<div id='center'>
<h3><img src="images/main-bullet.jpg"> Intranet <img src="images/main-bullet-arrow.jpg">
<p class="maintop">This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.
Please click on any of the sections for more details of that respective heading.</p></h3>
<h6>B'days <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h6>
<h4>Events <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h4>
<p></p>
<p></p>
<p></p>
<h5>Latest News <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all office-based and home-based employees<br>of Focus Infosys. Please click on any of the sections for more details of that<br>respective heading. This is an internal website (intranet) for all office-based and<br>home-based employees of Focus Infosys. Please click on any of the<br>sections for more details of that respective heading. This is an<br>internal website (intranet) for all office-based and home-based<br><a href="#" id="more">more...</a></p>
</h5>
<p>This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.</p>
</div>


</div>
<!-- End Center -->


<!-- Start Bottom -->
<div id='page_footer'>
<p>
Copyright &copy; 2008 Designed By: <a href="http://www.focusmt.com">Focus Infosys (India) Pvt Ltd</a>
</p>
</div>
<div id="page_footer2">
</div>
<!-- End Bottom -->


</div>


</body>
</html>

for this website left i m tryng to put switch type menu.

thanq in advance

Edited by happygeek: fixed formatting

0

You could try something like this:

CSS

#button1 {
  width: 50px;
  height : 25px;
  overflow : hidden;
  background-image: url('/images/image.jpg');
}

#button1:hover {
  background-image: url('/images/imageon.jpg');
}

HTML

<div id='button1'>
 &#160;
</div>
0

Hi,

Here is the CSS code:

This is the css code i saved file as a style.css

body {
text-align: center;
background-color: #FFFFFF;
margin:1px 0px 0px 0px;
color:#333333;
}


A:link {
COLOR: #ba0001; text-decoration: none;
}
A:visited {
COLOR: #ba0001; text-decoration: none;
}
A:active {
COLOR: #ba0001; text-decoration: none;
}
A:hover {
COLOR: #ba0001; text-decoration: underline;
}


#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 1004px;
text-align: left;
background: #FFFFFF url('images/main-bg.jpg') top left repeat-y;
}


#page_header {
height: 82px;
background: #FFFFFF url('images/topbanner.jpg') bottom left no-repeat;
clear: both;
}


/* Start Main menu */
#menu{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
float:left;
height:16px;
}
#menu a{
float:left;
height:16px;
width:132px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn1.jpg) center center repeat-x;
}
#menu a:hover{
color:#FFFFFF;
}
#menu .current_page{
color:#FFFFFF;
}


#menu2{
width:1004px;
height:30px;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu2 ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu2 li{
float:left;
height:16px;
}
#menu2 a{
float:left;
height:16px;
width:210px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn2.jpg) center center repeat-x;
}
#menu2 a:hover{
color:#FFFFFF;
}
#menu2 .current_page{
color:#FFFFFF;
}
/* End Main menu */


/* Start Left Side */
#left_side {
float:left;
width:205px;
}
#left_side h3 {
margin:0px 0px 0px 0px;
height:43px;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#FFFFFF;
padding:15px 4px 4px 70px;
border-right: 1px #999999 solid;
background-image:url(images/left-hed-bg.jpg);
background-repeat:repeat-x;
}
#left_side pre {
margin:0px 0px 20px 0px;
padding:0px 0px 0px 0px;
height:86px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
background-image:url(images/user-bg.jpg);
}
/*
.sign {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 130px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
border-right: 1px #999999 solid;
}
*/
.outrline{
width:140px;
height:13px;
margin:10px 0px 0px 23px;
background-color:#FFFFFF;
border:1px solid #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
#left_side p {
margin-top:0px;
margin-bottom:0px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
color: #666666;
text-align: justify;
}
/* Start Left Menu */
#linklist {
padding-left: 0;
margin-left: 0;
border-bottom: 0px solid #666666;
display:block;
width: 200px;
height:10px;
line-height:15px;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
}
#linklist li {
width:183px;
height:10px;
list-style: none;
margin:0;
font-family:verdana;
font-size:11px;
line-height:15px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
}
#linklist li a {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #444343;
line-height:15px;
}
#linklist li a:hover {
text-decoration: none;
background-image: url(images/left-bg.jpg);
background-repeat:no-repeat;
display:block;
width: 183px;
height:10px;
font-weight: normal;
padding-left: 20px;
color: #ba0001;
line-height:15px;
}
/* End Left Menu */


/* Start Left Links Menu */
.mainDiv{
width:200px;
}
.topItem{
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:left left;
background-repeat:no-repeat;
border: none;
width: 200px;
height: 10px;
color: #000000;
cursor:pointer;
text-indent:10px;
}
.topItemOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("r_left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.topItemClose{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #000000;
cursor:pointer;
}
.topItemCloseOver{
text-indent:10px;
font: 11px verdana;
letter-spacing: 0;
background: url("left-bg2.jpg") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 10px;
width: 200px;
color: #FF0112;
cursor:pointer;
}
.dropMenu{
font: 11px verdana;
background-color: #FFFFFF;
color: #000000;
border: 0px solid #FFFFFF;
border-width: 0px 0px 0px 0px;
filter:alpha(opacity=100);
padding-top:0px;
padding-bottom:0px;
}
.subMenu{
display:block;
}
.subItem{
margin-left:5px;
margin-top:2px;
height:10px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItem a{
margin-left:15px;
font: 10px verdana;
text-decoration:none;
color: #000000;
}
.subItemOver{
margin-left:0px;
margin-top:2px;
font: 10px verdana;
height:10px;
color: #FF0112;
}
.subItemOver  a{
margin-left:20px;
font: 10px verdana;
cursor:pointer;
color: #FF0112;
text-decoration:none;
}
/* End Left Links Menu */


/* End Left Side */


#content_wrapper {
margin-top:5px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
border:0px dashed #FFFFFF;
}


/* Start Right Side */
#right_side {
float: right;
width:195px;
}
#right_side h3 {
margin:0px;
height:30px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #ffffff;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-hed-bg.jpg);
background-repeat: repeat-x;
}
#right_side p {
margin-top:5px;margin-bottom:15px;
padding:0px 5px 0px 5px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
line-height: 15px;
color: #333333;
text-align: left;
}
#right_side h5 {
margin:0px;
height:44px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #333333;
padding:13px 0px 0px 70px;
border-left: 1px #999999 solid;
background-image: url(images/right-sub-bg.jpg);
background-repeat: repeat-x;
}
/* End Right Side */


/* Start Center */
#center {
margin-left:200px;
margin-right:194px;
}
#center h3 {
height:79px;
margin:0px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #97be53 solid;
background-image: url(images/cntr-main-bg.jpg);
background-repeat: repeat-x;
}
#center p {
margin:0px 0px 0px 0px;
padding:7px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 20px;
text-align: justify;
}
.maintop{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
font-weight:normal;
line-height:12px;
text-align:left;
}
#center h6{
width:282px;
height:175px;
float:left;
margin:4px 2px 0px 6px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
text-align:left;
color: #ba0001;
padding:5px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban.jpg);
background-repeat: no-repeat;
}
#center h4{
width:285px;
height:175px;
margin:4px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px 2px 7px 7px;
border: 0px #FFFFFF solid;
background-image:url(images/cntr-top-ban2.jpg);
background-repeat: no-repeat;
}
#center h5{
height:170px;
margin:0px 0px 0px 7px;
font-family: verdana, arial, sans-serif;
font-size: 16px;
color: #ba0001;
padding:7px;
border: 0px #FFFFFF solid;
background-image: url(images/cntr-btm-ban.jpg);
background-repeat: no-repeat;
}
#center A:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:none;
padding:0px 0px 0px 350px;
}
#center A:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ba0001;
font-weight:bold;
text-decoration:underline;
padding:0px 0px 0px 350px;
}
/* End Center */


/* Start Footer */
#page_footer {
height:20px;
background:#e0dfdf;
clear:both;
}
#page_footer p {
padding-top:3px;
text-align:center;
font-family: verdana;
font-size: 10px;
line-height:14px;
color:#333333;
}
#page_footer2 {
height:15px;
background:#FFFFFF;
clear:both;
}


#page_footer A:link {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:visited {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:active {
COLOR: #382f0c; text-decoration: none
}
#page_footer A:hover {
COLOR: #382f0c; text-decoration: underline
}
/* End Footer */


and HTML code is here:


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<head>


<!-- Site Title -->
<title>f-bay...</title>


<!-- Style -->
<link href='style.css' type='text/css' rel='stylesheet' />
<script type="text/javascript" src="images/xpmenuv21.js"></script>
</head>



<body>


<div id='page_wrapper'>


<div id='page_header'>
</div>


<!-- Start Main Menu -->
<div id="menu">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ornaments</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Automobiles</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Miscellaneous</a></li>
<li><a href="#">&nbsp;&nbsp;Computer Hardware</a></li>
</ul>
</div>


<div id="menu2">
<ul>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Property rentals available</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Matrimonial - Brides wanted</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Paying Guest facilities available</a></li>
</ul>
</div>
<!-- End Main Menu -->


<div id='content_wrapper'>


<!-- Start Left side -->


<!-- Start Left links -->
<div id='left_side'>
<ul id="linklist">
<li><a href="#" >Create Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#" >Search Case</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Advertisement</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">COO Speaks</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Leave Rules</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">List of Holidays 2008</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Obituary</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Focus Coimbatore Magazine</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Extracurricular Facilities</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Line Count Records of Focusites</a></li>
<li><img src="images/left-div.jpg" /></li>
<li><a href="#">Accounts Documents</a></li>
<li><img src="images/left-div.jpg" /></li>
</ul>
<!-- End Left links -->


<h3>User Login</h3>


<pre><input type="text" name="textfield" class="outrline" />
<input type="text" name="textfield" class="outrline" />
Sign In
</pre>



<h3>My Links</h3>
<h3>News / Events</h3>


</div>
<!-- End Left side -->


<!-- Start Right side -->
<div id='right_side'>


<h3>About Company</h3>
<h5>Services</h5>
<p><img src="images/exp.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
<h5>Products</h5>
<p><img src="images/exp2.jpg"><br>This is an internal website
(intranet) for all office-based and
home-based employees of Focus
Infosys. Please click on any of
the sections for more details of
that respective heading. This is an
internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.</p>
</div>
<!-- End right side -->


<!-- Start Center -->
<div id='center'>
<h3><img src="images/main-bullet.jpg"> Intranet <img src="images/main-bullet-arrow.jpg">
<p class="maintop">This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.
Please click on any of the sections for more details of that respective heading.</p></h3>
<h6>B'days <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h6>
<h4>Events <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all<br>office-based and home-based<br>employees of Focus Infosys.<br>Please click on any of the<br>sections for more details<br>of that respective<br> heading.</p></h4>
<p></p>
<p></p>
<p></p>
<h5>Latest News <img src="images/cb-bullet.jpg"><p class="maintop">This is an internal website (intranet) for all office-based and home-based employees<br>of Focus Infosys. Please click on any of the sections for more details of that<br>respective heading. This is an internal website (intranet) for all office-based and<br>home-based employees of Focus Infosys. Please click on any of the<br>sections for more details of that respective heading. This is an<br>internal website (intranet) for all office-based and home-based<br><a href="#" id="more">more...</a></p>
</h5>
<p>This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.</p>
</div>


</div>
<!-- End Center -->


<!-- Start Bottom -->
<div id='page_footer'>
<p>
Copyright &copy; 2008 Designed By: <a href="http://www.focusmt.com">Focus Infosys (India) Pvt Ltd</a>
</p>
</div>
<div id="page_footer2">
</div>
<!-- End Bottom -->


</div>


</body>
</html>

for this website left i m tryng to put switch type menu.

thanq in advance

Edited by happygeek: fixed formatting

0

left vertical menu is there for that i want use like >>switch type buttons can any one tell me how to do that.
what do you mean by switch type buttons.
>>And i know switch type menu but not like vertical menu bar.
can you give example

so that i can understand what actually you want.

[edit] you are talking about vertical or horizontal menu ????

0

HI,
Thanx for spending time. Switch type menu means, If we click on any link in left side it has to expand means sub links has to shown for that link.

0

Hi All,
I designed one website useing div tags (its completed). for that website, left vertical menu is there for that i want use like switch type buttons can any one tell me how to do that.
And i know switch type menu but not like vertical menu bar. only i can give one link as a switch type but i want in that some links tobe switch type some should be normal links.
plzzzzzzzzzzzzzzzzzzzzzzzzz can any one help me in this.
thanq

Hopefully this will help you....

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}


.submenu{
margin-bottom: 0.5em;
}
</style>


<script type="text/javascript">


/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/


var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only


if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}


function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar.className=="submenu") //DynamicDrive.com change
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}


function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}


function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}


if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction


if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate


</script>

Edited by happygeek: fixed formatting

0

in head part

<style type="text/css">
.menuOut {
width:147px;
height:13px;
font-family:verdana,arial;
font-size:11px;
color:#000000;
font-weight:normal;
text-align:left;
text-decoration:none;
margin:0px;
padding:5px 0px 5px 0px;
border:0px solid #000000;
background-image:url(images/leftlink-bg.jpg);
cursor:pointer;
}

.menuOver {
width:147px;
height:13px;
font-family:verdana,arial;
font-size:11px;
color:#CE2127;
font-weight:normal;
text-align:left;
text-decoration:underline;
margin:0px;
padding:5px 0px 5px 0px;
border:0px solid #000000;
background-image:url(images/r_leftlink_bg.jpg);
cursor:pointer;}

.submenu {
width:140px;
font-family:verdana, arial;
font-size:10px;
padding-left:5px;
}
.submenu a {
color:#CE2127;
text-decoration:none;
font-weight:none;
}
.submenu a:hover {
color:#000000;
text-decoration:underline;
font-style:none;
font-weight:none;
}
</style>

<script type="text/javascript">
function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("cont").getElementsByTagName("DIV");
        if(el.style.display == "none"){
            for (var i=0; i<ar.length; i++){
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        }else{
            el.style.display = "none";
        }
    }
}
function ChangeClass(menu, newClass) { 
     if (document.getElementById) { 
        document.getElementById(menu).className = newClass;
     } 
} 
document.onselectstart = new Function("return true");
</script>

In body part

<!-- Menu start -->
]<div id="cont">
    <p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">Work from Home</p>
    <div class="submenu" id="sub1" style="display:none;">
        - <a href="independent-transcription.asp">Independent Transcription Professional</a><br/>
        - <a href="#">HT Calculator</a><br/>
    </div>
</div>
<!-- Menu end -->

Edited by Reverend Jim: Fixed formatting

0

Note that Firefox considers 0 followed by a unit of measure (such as 0px or 0%) to be invalid, and throws away the entire style containing it. I see quite a few of those.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.