How do I add the code for a menu on yolacodes.yolasite.com?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
  • (Edited)
hi guys
i have seen ur yolacode.yolasite.com i would like to add a sliding down menu but i cannot work out the code what do i need to do??
thanks
Photo of CinziaS

CinziaS

  • 30 Posts
  • 1 Reply Like

Posted 8 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi CinziaS

The sliding menu works really well! You can see the original website and demo here: Scriptiny.com.

If you would like to replace your existing menu with the sliding menu, you will need to take it out of navigation. To do this:


  1. Click on Page > Edit Navigation on your Sitebuilder menu.

  2. You will see a page with 2 columns. The list in the left-hand column, are all your pages that are currently in your menu. Drag these pages over to the right-hand column to take it out of the menu

  3. Click "OK" when done.



Then you can add the Sliding Dropdown Menu to your page. You will need to add quite a bit of HTML to do it.

Drag and drop a HTML Widget onto your page. Please see Adding HTML for steps on how to do this.

Copy the CSS below and paste it into the HTML Editor:
<style type="text/css">
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url('resources/Littleus/tab1/header.gif')}
.dropdown dt:hover {background:url('resources/Littleus/tab1/header_over.gif')}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
</style>

Next step is to add the Javascript. Drag and drop another HTML Widget below the first one. Copy and paste this code into the HTML Editor:

<script type="text/javascript">
var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
</script>

Last but not least, add the HTML that will create the Slide Dropdown Menu. Drag and drop another HTML Widget below the first two. Copy and paste this code:

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

You will need to replace the items and links in the HTML code with the pages that you would like to link from you menu and sub-menu pages.

I hope this works for you! If you have any questions or need help, please post it here.

Thank you
Nazlie