1 Attachment(s)
How to insert Vertical, Accordion Navigation Bar (NOT slider)?
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.
Attachment 103234
Thank you for trying to help!! :D
Re: How to insert Vertical, Accordion Navigation Bar (NOT slider)?
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.
Re: How to insert Vertical, Accordion Navigation Bar (NOT slider)?
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.
Re: How to insert Vertical, Accordion Navigation Bar (NOT slider)?
Hang on. I bet Acorn will come up with something when he reads this post.
Re: How to insert Vertical, Accordion Navigation Bar (NOT slider)?
Quote:
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
1 Attachment(s)
Re: How to insert Vertical, Accordion Navigation Bar (NOT slider)?
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: Attachment 103791 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
Re: How to insert Vertical, Accordion Navigation Bar (NOT slider)?
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.)
Re: How to insert Vertical, Accordion Navigation Bar (NOT slider)?
Quote:
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
