struggling creating an accordion style shop menu for my website

  • 1
  • Question
  • Updated 8 years ago
  • Answered
tried many ways generators etc and not got anything working
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Jamie,

Can you please let us know the following: the url for your site, the page you have the menu on, where you got the code for the menu, any examples of what you are trying to achieve.
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
www.j-autos.com/online-shop and im trying to create a menu like the one on this page www.scoobyparts.com thanks
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Jamie,

Accordion menus generally require javascript of some kind. The one you have on your site currently is css--you do need Silver to upload javascript. Here is a link to a menu you can use from Dynamic Drive:
http://www.dynamicdrive.com/dynamicin....

Here is a general description of the steps to take to implement--it will vary depending on the code you pick:
1)Download the code from Dynamic Drive
2)Unzip it, you will generally find a css file, an html file, and one or more .js files and images if needed.
3)Upload all images
4)Upload the js files
5)Open the css file in Notepad or similar program, change the urls of any images, etc. (should have resources/filename.jpg kind of url)
6)Upload the css file
7) Open the html file in Notepad or similar program, change the urls of any images, links, etc. (should have resources/filename.jpg kind of url)
8) Copy and paste the html to an HTML widget on your page. Save and publish changes.

Again, these are very generic instructions. Give it a try and holler if you run into trouble.
Photo of darrell duke

darrell duke

  • 30 Posts
  • 0 Reply Likes
still struggling with this, tried your instructions and not got it working
Photo of darrell duke

darrell duke

  • 30 Posts
  • 0 Reply Likes
http://www.j-autos.com/tester-page.php this is what im trying i know im missing the css file but i dont know how or where to add this
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Darrell

If you go to the Dynamic Drive link, where you downloaded the necessary files, you should two boxes on that page where you're supposed to copy the codes. Copy each code and place into HTML Widgets. I've attached a screenshot to show you the two boxes that I'm talking about.



Please let us know if you have further questions.
Photo of darrell duke

darrell duke

  • 30 Posts
  • 0 Reply Likes
http://www.dynamicdrive.com/dynamicin...
dont get that opyion for this one link shows u what it gives me
Photo of darrell duke

darrell duke

  • 30 Posts
  • 0 Reply Likes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml...>

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}



Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:

- Expand 1st header within "expandable" header group
- Expand 3rd header within "expandable" header group


Helpful links:

- Adding arbitrary links hat expand/ collapse the contents
- Taking advantage of the oninit() and onopenclose() event handlers


Photo of darrell duke

darrell duke

  • 30 Posts
  • 0 Reply Likes
it works in dreamweaver and just doesnt through yola, this is what i find annoying sometimes yola seems to have issues with everything i try to do any body know a solution, thanks
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Darrell,

I will try to step through this with screen shots and hopefully get this working for you!

1) Download the .js file provided


2) Download the images provided


3) Copy the code provided


4) Upload the .js file into your File Manager. Note the url for the file at the top of the File Manager (should start with resources).

5) Upload the images into your File Manager. Note the urls for the images at the top of the File Manager (should start with resources). It would look something like: resources/ddaccordion.js

6) Paste the code into Notepad or similar editor. Change the following urls into the urls for the .js file and the images.:








7) Change the names of the Links and the urls for the links to the various pages to the links to your own pages (rather than what dynamic drive has).

8) You can delete the code at the bottom that begins with



9) Copy the code you just changed from Notepad and paste it into an HTML widget on your page where you want the menu to appear.

Please let us know how this goes!

Photo of darrell duke

darrell duke

  • 30 Posts
  • 0 Reply Likes
this is now working many thanks for your help with this, now the next step i need to know how to implement frames. I want this menu to show on all my shop pages on the website but not on the non shop pages. I want my items im selling to appear on the right hand side the menu on the left.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Darrell,
I am going to ask a colleague of mine to help you with the above question. She's not currently online, but when she returns she will be able to comment here. Thanks for your patience.

Kind Regards,
Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Darrell

I have responded to your above question on the other thread you have posted here: http://forum.yola.com/yola/topics/fra...