Newbie: drop down menu and other questions

WebsiteBaker Support (2.8.x) > Templates, Menus & Design

(1/2) > >>

marcomesa:
Hi folks,
I just moved my website from a netsons host to another one, it was so hard for a totally beginner like me, but I did it. now I'm changing the style of my website and i really would appreciate your help.
let's start with my website (sorry it's in italian)

http://www.beavita.it/

the temeplate is orange sunset and utile now it worked fine, but I need soome changement to do. Do you see in the section "the bigtrip" on the left menu there are 4 entries. If you go to "trip news" you don see anything but "trip news" it's the parent of a lot of pages I would displayed a drop down in "in this section" menu under the news button...it would make also the website structure browsable with ease. Actually the only way i know to do it is writing in the main body of the page an hyperlink for every page son of "trip news", I will do it, but I would also make the website structure clear. i think a dropdown menu could suit my needs...could you help me please? Or if you have any other idea how to make this kind of structure feel free to suggest me...
Oh I must resay I'm a totally newbie in this world so be patient...

please forgive my english, it is not my native language... :wink:

comfort:
try this one:

example: http://www.stichtingknipoog.nl/

put this code in where you want the dropdown:

--- Code: ---<div class="dropdown" id="my_dropdown_id">
<?php show_menu(1, 0, 1, false, '<li>[a][menu_title]</a>','</li>','<ul>','</ul>','',''); ?>
</div>
<script type="text/javascript">createDropdown('my_dropdown_id');</script>
--- End code ---

put this code in the head (between <head> and </head>) of your template:

--- Code: ---<script type="text/javascript" src="/dropdown.js"></script>
--- End code ---

put this code in a new file (/dropdown.js)

--- Code: ---var dropdown_rootNode = null; // Reference to root node of the current navigation.
var dropdown_timer = null; // Timer to hide all menu's on a 'onmouseout'.
var dropdown_timerWait = 750; // Time to wait before closing all open menu's.
var dropdown_zIndex = 1000; // zIndex of the navigation.

function createDropdown(nav_id)
{
if(document.getElementById) // Browser compatability
{
try
{
var rootNode = document.getElementById(nav_id);

// Add javascript to items in navigation and hide submenu's.
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];

if(ulNode.nodeName == 'UL') // Lookup UL tags
{
for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];

if(liNode.nodeName == 'LI') // Lookup LI tags
{
// Init subitems
__initDropdown(liNode);

// Add a mouseover-event to each list item.
liNode.onmouseover = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}

__showDropdown(this);
}

liNode.onmouseout = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}

dropdown_timer = setTimeout('__hideDropdown()', dropdown_timerWait);
}
}
}
}
}
}
catch(e)
{
// Ignore
}
}
}

// Add classes and mouse-events to subitems.
function __initDropdown(rootNode)
{
dropdown_zIndex += 2;
var zIndex = dropdown_zIndex;

// Open subitems
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];

if(ulNode.nodeName == 'UL')
{
ulNode.style.display = 'none';
ulNode.style.visibility = 'hidden';
ulNode.style.zIndex = zIndex;

for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];

if(liNode.nodeName == 'LI')
{
// liNode.style.zIndex = zIndex + 1;

// Init subitems
__initDropdown(liNode);

// Add a mouseover-event to each list item.
liNode.onmouseover = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}

this.className += ' hover';
__showDropdown(this);
}

liNode.onmouseout = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}

this.className = this.className.replace('hover', '');

dropdown_timer = setTimeout('__hideDropdown()', dropdown_timerWait);
}
}
}
}
}
}

// Show submenu
function __showDropdown(rootNode)
{
if(dropdown_rootNode == null)
{
dropdown_rootNode = rootNode.parentNode.parentNode;
}

// Hide siblings' submenu's
var ulNode = rootNode.parentNode;
for(var i = 0; i < ulNode.childNodes.length; i++)
{
var liNode = ulNode.childNodes[i];

if(liNode.nodeName == 'LI')
{
if(liNode != rootNode)
{
__hideDropdown(liNode);
}
}
}

// Show submenu's (if any)
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];

if(ulNode.nodeName == 'UL')
{
ulNode.style.display = 'block';
ulNode.style.visibility = 'visible';
}
}
}

// Hide submenu's
function __hideDropdown(rootNode)
{
if(__hideDropdown.arguments.length < 1)
{
var tmpNode = dropdown_rootNode;
dropdown_rootNode = null;

if(tmpNode != null)
{
for(var i = 0; i < tmpNode.childNodes.length; i++)
{
var ulNode = tmpNode.childNodes[i];

if(ulNode.nodeName == 'UL')
{
for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];
if(liNode.nodeName == 'LI')
{
__hideDropdown(liNode);
}
}
}
}
}
}
else
{
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];

if(ulNode.nodeName == 'UL')
{
ulNode.style.display = 'none';
ulNode.style.visibility = 'hidden';

for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];

if(liNode.nodeName == 'LI')
{
__hideDropdown(liNode);
}
}
}
}
}
}

--- End code ---

and add this to your stylesheet:

--- Code: ---.dropdown
{
background: #000000;
height: auto;
padding: 4px 4px 4px 10px;
}

.dropdown ul
{
list-style: none none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

.dropdown ul li
{
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 18px 0px 0px;
position: relative;
}

.dropdown ul li a
{
color: #FFFFFF;
font-family: arial;
font-size: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-decoration: none;
}

.dropdown ul li a:hover
{
text-decoration: underline;
}

.dropdown ul li ul
{
background: #F0F0F0;
border: #000000 solid 1px;
display: none;
left: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: absolute;
top: 25px;
}

.dropdown ul li ul li
{
color: #000000;
display: block;
font-family: Arial;
font-size: 12px;
font-weight: normal;
left: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
top: auto;
width: 120px;
}

.dropdown ul li ul li a
{
color: #000000;
display: block;
padding: 3px 3px 3px 6px;
}

.dropdown ul li ul li ul
{
left: 125px;
top: 2px;
}
--- End code ---

marcomesa:
thank you so much for the tips, I 've done what you said (I put the code in dropdown.js because I cannot use in windows /dropdown.js name cause the "/")
but what it comes out it's just another menu same as the main menu, but with a different style (I think because the code I paste in the file style.css).
but there is no dropdown menu unfortunately...som ething went wrong maybe...

by the way what I would do is replace the static main menu with a dropdown and the dropdown should use the same style of the template I'm using...I try so hard but all my attempt were unsuccesful :-(

marcomesa:
I also see you suggest me to use showmenu instead showmenu2 is there any particular reason?because I think there is not the function showmenu 1 installed on my website baker, maybe I should convert the showmenu 1 code in showmenu 2...Am I wrong?

marcomesa:
ok I tryied a lot and it seems i fixed my dropdown menu, everything seems to work like a charm, I have just one question, how can I avoid in my menu the little square on the left of each menu entry?
I did some test but I still dont know how can I fix it!
Thank you...
here my website

http://www.beavita.it

Navigation

[0] Message Index

[#] Next page

Go to full version