[nojs]

Hello,

I am looking for a web design expert
I want to make my own site, but it has to be
very special! So i want a vertical menu bar that
flips open! Is this possible and can you make that
for me?
If it takes to much time, I understand

[Advertisements]

what do u mean that it "flips open"? is there an example you can give us?

[TaNkZ101]

what do u mean that it "flips open"? is there an example you can give us?

[ar31791]

Do a quick google search for "DHTML menu".
That should get you started.

[nojs]

http://www.dcshoes.com/home.asp

like this

[the_gh0st]

Well that site is made in Flash, which is another thing entirely. But there are ways that you can make menus like that using a mixture of HTML, CSS, and JavaScript. Here's one that you might like:



Make a CSS file with the following in it :

--->You Can Edit: background: color: font-family: font-weight: text-decoration: cursor:

.mainDiv
{
  width:160px;
}
.topItem
{
  width:160px;
  height:22px;
  cursor:pointer;
  background: #467BF2;
  text-decoration: none;
  color: white; 
  font-weight:bold;
  font-family:"GOTHIC";
 
}


.dropMenu
{
  background:#D9D9D9;
  border-top:1px solid #467BF2;
  border-left:1px solid #92B1F8;
  border-right:1px solid #92B1F8;
  border-bottom:1px solid #92B1F8;
}

.subMenu
{
   display:none;
}
.subItem
{
   padding-left:5px;
   cursor:pointer;
   font-weight:bold;
   text-decoration:none;
   color:black;
}

.subItem a
{
   text-decoration:none;
   color:black;
}

.subItemOver
{
   cursor:pointer;
   color:blue;
   text-decoration:underline;
   font-weight:bold;
   padding-left:5px;
}

.subItemOver  a
{
   color:blue;
}


.drop
{
   border-left:1px solid black;
   border-right:1px solid black;	
}

Make a .js file with the following (I did not write this, I suck at JScript):

--->EDIT NOTHING

/************************************************************************ 
Author: Eric Simmons
Contact: [email protected]
Website: http://www.jswitch.com
Version: 1.0 4/2005	   
Browser Target: Mozilla 6+/FireFox Netscape 6+, IE 5.0+
Type : XP style sliding dropdown menus (aka Switch Menu II on Dynamicdrive.com)
Note: Modification by Dynamicdrive.com to dynamically determine sub menus widths

DISCLAIMER:
THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT
ANY EXPRESS OR IMPLIED WARRANTIES, JSWITCH.COM
IS NOT RESPONSIBLE FOR ANY ADVERSE AFFECTS TO
YOUR COMPUTER OR SYSTEMS RUNNING THIS SCRIPT.

LICENSE:
YOU ARE GRANTED THE RIGHT TO USE THE SCRIPT
PERSONALLY OR COMMERCIALLY. THE AUTHOR, WEBSITE LINKS 
AND LICENSE INFORMATION IN THE HEADER OF THIS SCRIPT
MUST NOT BE MODIFIED OR REMOVED. 

v 1.0
XP style sliding Menu Bar
***********************************************************************/

var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; //this is the time between each call to slide
var DIV_HEIGHT = 22; //value irrelevant
var SUB_MENU_NUM =0;
var RE_INIT_OBJ = null;
var bMenu = document.getElementById("curMenu");
var MainDiv,SubDiv

//DD added code
document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')

function Init(objDiv)
{
	if (TIMER_SLIDE == null)
	{
		SUB_MENU_NUM = 0;
		MainDiv = objDiv.parentNode;
		SubDiv =  MainDiv.getElementsByTagName("DIV").item(0);
		SubDiv.onclick = SetSlide;
		
		OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
		OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);

				document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
				DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code
		
		for (i=0;i<OBJ_VIEW.childNodes.length;i++)
		{
			if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
			{
				SUB_MENU_NUM ++;
				OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
				OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
			}
		}   
		
			  NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); 
	}

}
function SetSlide()
{   
			if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
	  if (TIMER_SLIDE == null && this.parentNode == MainDiv)
			TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
	  else
	  {
		  RE_INIT_OBJ = this;
		  setTimeout('ReInit()', 200);
	  }
}

function ReInit(obj)
{
	Init(RE_INIT_OBJ);
	TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
	RE_INIT_OBJ = null;
}

function RunSlide()
{

	if (OBJ_VIEW.getAttribute("state") == 0)
	{

		NEW_PIX_VAL += PIX_SLIDE;
		OBJ_SLIDE.style.height = NEW_PIX_VAL;

		if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
		{
			clearInterval(TIMER_SLIDE);
			TIMER_SLIDE = null;
			OBJ_VIEW.style.display = 'inline';
			OBJ_VIEW.setAttribute("state","1")
			MainDiv.setAttribute("state",NEW_PIX_VAL);
		}
	} else
	{
		OBJ_VIEW.style.display = 'none';
		NEW_PIX_VAL -= PIX_SLIDE;
		if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;
		if (NEW_PIX_VAL <= 0)
		{
			NEW_PIX_VAL = 0;
			OBJ_SLIDE.style.height = NEW_PIX_VAL
			clearInterval(TIMER_SLIDE);
			TIMER_SLIDE = null;
			OBJ_VIEW.setAttribute("state","0")
			MainDiv.setAttribute("state",NEW_PIX_VAL);
		}
	}
}

function ChangeStyle()
{
	if (this.className == this.getAttribute("classOut"))
		this.className = this.getAttribute("classOver");
	else
		this.className = this.getAttribute("classOut");
}

Put this into the HEAD section of your page:

<link rel="stylesheet" type="text/css" href="sddm.css" />

And finally, put this HTML where you want the menu to appear:

--->You Can Edit: The contents of the DIVs, and the anchors.

<script language="JavaScript" type="text/javascript" src="menu.js"></script>

<!--------Start Menu---------->
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" > Demo Menu 1</div>		
<div class="dropMenu" >
	<div class="subMenu" state="0">
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.javascriptkit.com">JavaScript Kit</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.codingforums.com">Coding Forums</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.builder.com">Builder.com</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.cssdrive.com">CSS Drive</a></span>
	</div>
</div>
</div>

<!--------End Menu---------->
<BR />
<!--------Start Menu---------->
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" > Demo Menu 2</div>		
<div class="dropMenu" >
	<div class="subMenu" state="0">
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.slashdot.org">Slash Dot</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://news.com">News.com</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://wired.com">Wired News</a></span>
	</div>
</div>
</div>

<!--------End Menu---------->
<BR />
<!--------Start Menu---------->
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" > Demo Menu 3</div>		
<div class="dropMenu" >
	<div class="subMenu" state="0">
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://cnn.com">CNN</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://msnbc.com">MSNBC</a></span><BR />
		<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://news.bbc.co.uk">BBC News</a></span>
 	</div>
</div>
</div>

<!--------End Menu---------->

Please tell me if you have problems, thanks!

[nojs]

how do you make a java script ?
and css i paste that into wordpad
and i have 2 html files ?

I can't work with that i'm sorry
can you explain me please ?

[TaNkZ101]

the same way you make an html file (through wordpad/notepad), except you don't make the extension .html or .html, but you make the extension .js, for example menu.js. same as for the css, save as menu.css. actually, as you see from

<link rel="stylesheet" type="text/css" href="sddm.css" />

you must save the .css file as sddm.css, OR you can change the href="" to whatever you want your file name to be.

[nojs]

that code in your last answer
in which file do i have to put that ?

[nojs]

Hi,
thanks it's very beautifull!
But you see i have 3 lines can i put those 3 lines next to eachother so i have one
line with 3 "buttons"

Edited by nojs, 10 March 2006 - 05:32 AM.

[TaNkZ101]

you put that code in the <head> section of your main page (.html)