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: 8165
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.)