How do I do a more section to my links

  • 1
  • Question
  • Updated 10 years ago
  • Answered
I want to know how I can make a more section to my links like on Miniclip.
I have included an image to show you what I mean I tried doing it with links on my site , But That meant I had to scroll down again (EG. http://juex.synthasite.com (my site)
Photo of YorkshireNerd

YorkshireNerd

  • 56 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Perko

I wonder if doing an expand/collapse type of script may work for you? Let me see if I can rig up something that may mimic this idea. Do you think you could give me some time to formulate this idea?
Photo of YorkshireNerd

YorkshireNerd

  • 56 Posts
  • 0 Reply Likes
Yes Sure
Photo of YorkshireNerd

YorkshireNerd

  • 56 Posts
  • 0 Reply Likes
I will be happy to finish of my mouseovers while you formulate.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay Perko

Take a look at my test site. Does this meet your needs?

http://rumballchick.synthasite.com/perko

click on "site menu"

I just created a link for the first 3. I just wanted to give you a general idea.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i like it, what is the code (if i may use it)

alex
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
That's a nice piece of script!
Photo of YorkshireNerd

YorkshireNerd

  • 56 Posts
  • 0 Reply Likes
Yes , Thats what I wanted. Please could I have the Script.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Please test this on a testpage first to ensure there are no broken codes.

1. You need to past this following code into an HTML widget and place high up on your site:

<!--<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>-->

2. Then, you need to drag another html widget over and paste this following code. In order for the expandable menu to take up the whole width of the site, you should not put it in a two-column widget. You can adjust the width as needed and you can add more tables to create another column.

<!--<!-- Keep all menus within masterdiv-->
< div id="masterdiv" >

<!--<div align=right><div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">       <div align=left><table valign="top" border="0" width="600">

<tbody><tr><td align="left">

<table border="0" width="150">

<tbody><tr><td style="font-family: Verdana; align="left" width="150">

<a href="YOUR LINK URL">homepage</a></td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

<a href="YOUR LINK URL">ABOUT US</a>

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

<a href="YOUR LINK URL">OUR JOURNAL</a>

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

12 Months

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

18 Months

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

24 Months

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Size 2

</td>

</tr>

</tbody></table>

</td>
<td align="left" valign="top">

<table border="0" width="150">

<tbody><tr><td style="font-family: Verdana; align="left" width="150">

SUB-CATEGORY

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Shirts

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Pants & Skirts

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Dresses

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Outfits

</td>

<tr>

<td style="font-family: Verdana;" align="left">

PJS & Onesies

</td>

</tr>

</tbody></table>

</td>
<td align="left" valign="top">

<table border="0" width="150">

<tbody><tr><td style="font-family: Verdana; align="left" width="150">

SUB-CATEGORY

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Shirts

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Pants & Skirts

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Dresses

</td>

</tr>

<tr>

<td style="font-family: Verdana;" align="left">

Outfits

</td>

<tr>

<td style="font-family: Verdana;" align="left">

PJS & Onesies

</td>

</tr>

< /tbody >< /table >

< /td >

< /tr >< /tbody >< /table >< /div > < /span >

< /div >-->

Lemme know if you need further help! Take out any spaces inside the <> and take out the <!-- and -->
Photo of YorkshireNerd

YorkshireNerd

  • 56 Posts
  • 0 Reply Likes
Photo of YorkshireNerd

YorkshireNerd

  • 56 Posts
  • 0 Reply Likes
Hi , Thanks for the post but how do I add links to these in the menu.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I suggest using tables to help align your links, then use the a href code to create your links. Look at step 2 to give you a better idea of how to do this.
Photo of YorkshireNerd

YorkshireNerd

  • 56 Posts
  • 0 Reply Likes
Thank you for your help. Worked Perfectly!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm so glad to hear that it worked out!