Member Avatar for kavithakesav

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
  • 192 Views
  • 10 Months Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for enque

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

Member Avatar for kavithakesav

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.

Member Avatar for enque

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.

Member Avatar for DangerDev

can u just give code so that i can understand what u want

Member Avatar for kavithakesav

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 because: fixed formatting
Member Avatar for FC Jamison

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>
Member Avatar for kavithakesav

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 because: fixed formatting
Member Avatar for DangerDev

u zip the files and give as attachment coz without image not able to understand.

Member Avatar for kavithakesav

Hi,

I attached zip file.

new.zip (139.51 KB)
Member Avatar for DangerDev

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 ????

Member Avatar for kavithakesav

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.

Member Avatar for mukund_007

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 because: fixed formatting
Member Avatar for kavithakesav

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 because: Fixed formatting
Member Avatar for MidiMagic

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.