Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

i want to make a menu


  • Please log in to reply

#1
nojs

nojs

    Member

  • Member
  • PipPipPip
  • 110 posts
Hello,

I am looking for a web design expert :tazz:
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
  • 0

Advertisements


#2
TaNkZ101

TaNkZ101

    Member

  • Member
  • PipPipPip
  • 327 posts
what do u mean that it "flips open"? is there an example you can give us?
  • 0

#3
ar31791

ar31791

    Member

  • Member
  • PipPip
  • 11 posts
Do a quick google search for "DHTML menu".
That should get you started.
  • 0

#4
nojs

nojs

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 110 posts
http://www.dcshoes.com/home.asp

like this
  • 0

#5
the_gh0st

the_gh0st

    Member

  • Member
  • PipPip
  • 49 posts
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! :tazz:
  • 0

#6
nojs

nojs

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 110 posts
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 ?
  • 0

#7
TaNkZ101

TaNkZ101

    Member

  • Member
  • PipPipPip
  • 327 posts
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.
  • 0

#8
nojs

nojs

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 110 posts
that code in your last answer
in which file do i have to put that ?
  • 0

#9
nojs

nojs

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 110 posts
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"
Posted Image

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

  • 0

#10
TaNkZ101

TaNkZ101

    Member

  • Member
  • PipPipPip
  • 327 posts
you put that code in the <head> section of your main page (.html)
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP