HTML/Java script Navigation Menu

Discussion in 'HTML & Website Design' started by crazyhorse, Sep 23, 2005.

0
  1. #1
    Hi

    I was wondering whether how this is done. Check here . When you click on the left in the navigation menu, a subcategory appears. Does anyone one know how this is done? Thanks;)
     
    crazyhorse, Sep 23, 2005 IP
  2. Connect

    Connect Guest

    Messages:
    191
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That subcategory is just generated most likely from a database, or could be hard-coded with an if-elseif, or select case check.

    Nothing too difficult there :)
     
    Connect, Sep 23, 2005 IP
  3. crazyhorse

    crazyhorse Peon

    Messages:
    1,137
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ok well I would like to implement the same idea with a new layout of mine. I'm using html what kind of HTML coding would I need to add. Maybe a example code? I got no html knowledge all.
     
    crazyhorse, Sep 23, 2005 IP
  4. maro

    maro Peon

    Messages:
    356
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Well it depends on your hosting.... What does your hosting support? php? asp?
    You then can code something to pull the data from the database or the data might be hardcoded as Hot-screensaver pointed out
     
    maro, Sep 23, 2005 IP
  5. Connect

    Connect Guest

    Messages:
    191
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The sample website you gave needs some scripting language such as php or asp. But of course can be done in HTML - hardcode, but very difficult to maintain if the site get bigger.
     
    Connect, Sep 23, 2005 IP
  6. crazyhorse

    crazyhorse Peon

    Messages:
    1,137
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Well i was more thinking about something like this: Javascript Category menu 

    






<!-- FIVE STEPS TO INSTALL CATEGORY MENUS:

  1.  Save the FRAMESET code and modify it for your page
  2.  Create a new document and save it as category-menus.html
  3.  Copy the coding into the HEAD of category-menus.html
  4.  Add the last code into the BODY of category-menus.html
  5.  Be sure to save the arrow images to your web server  -->

<!-- STEP ONE: Save this FRAMESET code and modify it for your page  -->

<frameset cols="175,*">
    <frame src="category-menus.html" name="left">
    <frame src="home-page.html" name="right">
</frameset>
</html>

<!-- STEP TWO: Create a new document, save it as category-menus.html  -->

<!-- STEP THREE: Paste this code into the HEAD of category-menus.html  -->

<HEAD>

<style type="text/css">
a
{text-decoration: none;}

.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}

.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site:  http://hem.passagen.se/dred -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // Number of menus
var usePictures = 1; // use pictures?  1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
   }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
   }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
            }
         }
      }
   }
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
      }
   }
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
      }
   }
}
lastn = n;
lastmove = move;
}
//  End -->
</script>
</HEAD>

<!-- STEP FOUR: Copy this code into the BODY of category-menus.html  -->

<BODY>

<div class="title" id="title1" style="top: 0px"> 
<a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 1</a>
</div>

<div class="submenu" id="submenu1" style="top: 20px">
 <a href="page01.html" target="right">Item # 1</a><br>
 <a href="page02.html" target="right">Item # 2</a>
</div>

<div class="title" id="title2" style="top: 20px"> 
<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 2</a>
</div>

<div class="submenu" id="submenu2" style="top: 40px">
 <a href="page03.html" target="right">Item # 3</a><br>
 <a href="page04.html" target="right">Item # 4</a><br>
 <a href="page05.html" target="right">Item # 5</a><br>
 <a href="page06.html" target="right">Item # 6</a>
</div>

<div class="title" id="title3" style="top: 40px"> 
<a href="#" onclick="javascript: toggle(3,45); return false"><img name="pic3" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 3</a>
</div>

<div class="submenu" id="submenu3" style="top: 60px">
 <a href="page07.html" target="right">Item # 7</a><br>
 <a href="page08.html" target="right">Item # 8</a><br>
 <a href="page09.html" target="right">Item # 9</a>
</div>

<div class="title" id="title4" style="top: 60px"> 
<a href="#" onclick="javascript: toggle(4,60); return false"><img name="pic4" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 4</a>
</div>

<div class="submenu" id="submenu4" style="top: 80px">
 <a href="page10.html" target="right">Item # 10</a><br>
 <a href="page11.html" target="right">Item # 11</a><br>
 <a href="page12.html" target="right">Item # 12</a><br>
 <a href="page13.html" target="right">Item # 13</a>
</div>

<!-- STEP FIVE: Be sure to save the arrow images to your site  -->

<!--  http://javascript.internet.com/img/category-menus/opened.gif  -->

<!--  http://javascript.internet.com/img/category-menus/closed.gif  -->

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  4.78 KB -->
    Code (markup):
    The only problem that I can see is that it is using frames and those ain't search engine friendly right?
     
    crazyhorse, Sep 23, 2005 IP
  7. mikmik

    mikmik Guest

    Messages:
    356
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It looks like you can take the target out of the links 
    <a href="page03.html" target="right">
    Code (markup):
    to get this 
    <a href="page03.html">
    Code (markup):
    and just put the javascript in the head of your normal page. Even better is to include your javascript from a seperate js file( the css also).

    Make just a normal page. Now put this stuff in the head section:
    
<style type="text/css">
a
{text-decoration: none;}

.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}

.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site:  http://hem.passagen.se/dred -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // Number of menus
var usePictures = 1; // use pictures?  1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
   }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
   }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
            }
         }
      }
   }
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
      }
   }
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
      }
   }
}
lastn = n;
lastmove = move;
}
//  End -->
</script>
    Code (markup):
    and then this where you want your menu:
    
<div class="title" id="title1" style="top: 0px"> 
<a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src="closed.gif" 

border="0">Category 1</a>
</div>

<div class="submenu" id="submenu1" style="top: 20px">
 <a href="page01.html">Item # 1</a><br>
 <a href="page02.html">Item # 2</a>
</div>

<div class="title" id="title2" style="top: 20px"> 
<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="closed.gif" 

border="0">Category 2</a>
</div>

<div class="submenu" id="submenu2" style="top: 40px">
 <a href="page03.html">Item # 3</a><br>
 <a href="page04.html">Item # 4</a><br>
 <a href="page05.html">Item # 5</a><br>
 <a href="page06.html">Item # 6</a>
</div>

<div class="title" id="title3" style="top: 40px"> 
<a href="#" onclick="javascript: toggle(3,45); return false"><img name="pic3" src="closed.gif" 

border="0">Category 3</a>
</div>

<div class="submenu" id="submenu3" style="top: 60px">
 <a href="page07.html">Item # 7</a><br>
 <a href="page08.html">Item # 8</a><br>
 <a href="page09.html">Item # 9</a>
</div>

<div class="title" id="title4" style="top: 60px"> 
<a href="#" onclick="javascript: toggle(4,60); return false"><img name="pic4" src="closed.gif" 

border="0">Category 4</a>
</div>

<div class="submenu" id="submenu4" style="top: 80px">
 <a href="page10.html">Item # 10</a><br>
 <a href="page11.html">Item # 11</a><br>
 <a href="page12.html">Item # 12</a><br>
 <a href="page13.html">Item # 13</a>
</div>
    Code (markup):
    I just put a real simple type of menu on a page. The formating is ugly, but you can save this page: toggleMenu and have a look.
     
    mikmik, Sep 24, 2005 IP