How to insert Vertical, Accordion Navigation Bar (NOT slider)?

**monicaanne2010** · 07 August 2014, 04:37 PM

I am trying to figure out how to insert an accordion menu/navigation onto my xara homepage. I already have a regular, horizontal navigation bar at the top of my homepage. However, I want to use the accordion style menu bar (left side of page) to add a link to all of my Ecwid categories and subcategories.

Please be very clear on what to do since I have never needed anything other than a basic navigation bar before.

I want it to look similar to this but match my company's colors.

Click image for larger version.

Name: blue-css-accordion-dropdown.jpg
Views: 8157
Size: 79.2 KB
ID: 103234

Thank you for trying to help!!

**gwpriester** · 07 August 2014, 09:02 PM

You can create a menu like this using layers, though it is a bit of work.

There are also a lot of CSS based menu options http://www.tripwiremagazine.com/2013...avigation.html

You need one that gives you the code that you can add to a placeholder that you can add to your website.

I have used this one in the past http://css3menu.com/ and it works pretty good though I do prefer to create my own.

**monicaanne2010** · 08 September 2014, 03:31 PM

I replied before to this but I guess it didn't get approved or something. I found a website that has css and html for menus. It also has images. Since I am used to just using HTML, I really don't know what to do with the CSS. Do you put it as a place holder like you do HTML? Since this one has HTML and CSS do I need to upload something to my website? I am royally confused.

**gwpriester** · 08 September 2014, 07:12 PM

Hang on. I bet Acorn will come up with something when he reads this post.

**Acorn** · 08 September 2014, 08:04 PM

Originally Posted by monicaanne2010

I replied before to this but I guess it didn't get approved or something. I found a website that has css and html for menus. It also has images. Since I am used to just using HTML, I really don't know what to do with the CSS. Do you put it as a place holder like you do HTML? Since this one has HTML and CSS do I need to upload something to my website? I am royally confused.

To run the CSS part, it needs to be in a head placeholder (object, page, website).
The contents of a CSS placeholder needs to have a <style> tag at the start and </style> tag at the end.
In comparison, a JavaScript placeholder starts and ends with <script> and </script>.
In further comparison, content put in place with html tags is in a body placeholder and usually starts and ends with <div> and </div> or <span with </span>; you never use <html> and </html>.

Acorn

**Rob-Xar** · 09 September 2014, 04:24 PM

Requires a bit of configuring and some html/css/jquery knowledge, but bootstrap has a nice accordion that can be implemented fairly easily.

For example, see this: accordian.xar and preview

You need to create a placeholder with the code, download all the support files from http://getbootstrap.com/ , press Ctrl + Shift + Alt + A on the placeholder and attach the support files.

Instructions on how to configure: http://getbootstrap.com/javascript/#collapse

Some lovely widgets, sliders and CSS components that can be inserted into Xara from bootstrap. PM if you want more info / examples.

Thanks
Rob

**monicaanne2010** · 17 September 2014, 03:24 PM

For some reason I didn't get a notification that there were replies like before. Thank you all for replying.

Acorn, will I need to worry about the images that are associated with the CSS accordion menu? So, I put the CSS in the head section of the placeholder and the html in the body? (It has both.)

**Acorn** · 17 September 2014, 05:03 PM

Originally Posted by monicaanne2010

For some reason I didn't get a notification that there were replies like before. Thank you all for replying.

Acorn, will I need to worry about the images that are associated with the CSS accordion menu? So, I put the CSS in the head section of the placeholder and the html in the body? (It has both.)

A bit more tricky than that.
Each of the menu images has to be "seen" by your Xara design page. That is, they need to put placed on the page, Named and hidden behind something.
You then will have a number of URL to the images, similar to index_htm_files.<image-name>.png.
In your Placeholder body (code) you insert these links to replace the current paths.

Acorn