Welcome to TalkGraphics.com
Results 1 to 8 of 8
  1. #1
    Join Date
    Mar 2013
    Location
    Florida
    Posts
    13

    Question 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.

    Click image for larger version. 

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

    Thank you for trying to help!!

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    38,043

    Default 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.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  3. #3
    Join Date
    Mar 2013
    Location
    Florida
    Posts
    13

    Default 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.

  4. #4
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    38,043

    Default 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.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,349

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

    Quote Originally Posted by monicaanne2010 View Post
    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
    Acorn - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

  6. #6
    Join Date
    Nov 2013
    Location
    Xara HQ, Hertfordshire, UK
    Posts
    1,344

    Default 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: 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

  7. #7
    Join Date
    Mar 2013
    Location
    Florida
    Posts
    13

    Default 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.)

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,349

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

    Quote Originally Posted by monicaanne2010 View Post
    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
    Acorn - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •