[RESOLVED] Porsche Navigation Menu – Please Help.

@mallocJul 01.2008

Hello All,

I have been learning Javascript over the last couple of weeks. I want to create a website that has the same navigation menu/technique as the Porsche website.

See example here: ~~[URL=”http://www.porsche.com/usa/”]~~http://www.porsche.com/usa/
[/URL]

When you hoover over the cars on the left, it brings out another button(s) that you can hoover over. When you hoover over that, it pops up a window with the car specs. What is this called? How do I achieve something like this? If you have a tutorial you can point me to that would be great. I have no idea how to accomplish this. I don’t know what this is called so can’t search for code snippets/tutorials on it.

to post a comment

JavaScript

@Vassil_CatsarovJul 01.2008 — #Well, you'd better try to ask more focused questions than this... What it does at prima vista, is using DIV tags which can be containers for your HTML code - text, graphics, whatever your taste and imagination pleases:
<DIV class=topnav id=topnav1><A class=topnavlink id=topnavlink1

onmouseover="overNav(0,'boxster','topnavlink1')"

onclick="gotoUrl('/usa/models/boxster/')" onmouseout=outNav(0)></A></DIV>[/QUOTE]
When you move your cursor over this particular element, onmouseover event triggers overNav(0,'boxster','topnavlink1'), which displays a second submenu ("another button(s)" according to your description) and so on... Onmouseout similarly hides the DIV elements... It's that simple.

@Vassil_CatsarovJul 01.2008 — #

[CODE]<html>
 <head>
 <style type="text/css">
 <!--
 #menu1 {
 position:absolute;
 width:139px;
 height:202px;
 z-index:1;
 left: 19px;
 top: 20px;
 background-color: #99CCFF;
 border: 2px solid #000033;
 }
 #menu2 {
 position:absolute;
 width:200px;
 height:115px;
 z-index:2;
 left: 160px;
 top: 60px;
 background-color: #999999;
 border: 2px solid #000033;
 visibility: hidden;
 }
 #picture {
 position:absolute;
 width:404px;
 height:293px;
 z-index:3;
 left: 364px;
 top: 20px;
 background-color: #FFFFCC;
 border: 2px solid #000033;
 visibility: hidden;
 
 }
 -->
 </style>
 </head>
 
 <body>
 
 <div id="menu1" onMouseOver="javascript:document.getElementById('menu2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('menu2').style.visibility='hidden';">Menu1</div>
 
 <div id="menu2" onMouseOver="javascript:document.getElementById('menu2').style.visibility='visible'; document.getElementById('picture').style.visibility='visible';" onMouseOut="javascript:document.getElementById('menu2').style.visibility='hidden'; document.getElementById('picture').style.visibility='hidden';">Menu2</div>
 
 <div id="picture" onMouseOver="javascript:document.getElementById('picture').style.visibility='visible'; document.getElementById('menu2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('picture').style.visibility='hidden'; document.getElementById('menu2').style.visibility='hidden';">Picture</div>
 
 </body>
 </html>[/CODE]

@mallocauthorJul 01.2008 — #Thanks for your reply! I will try this out.

@mallocauthorJul 07.2008 — #Cool. I tried it out and it works. Thanks a lot for your help.

[RESOLVED] Porsche Navigation Menu – Please Help.

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Porsche Navigation Menu – Please Help.

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴