Results 1 to 9 of 9
  1. #1
    Join Date
    May 2010
    Posts
    18
    Plugin Contributions
    0

    Default Flyout Menu CSS - Help!

    Hello everyone,

    I want to make the Fly out Menu look like the layout of my website. I downloaded the Zen Cart Flyout Menu Add-on, but have no way of making it look like my website original category.

    This is how the category should look:
    http://stylizedwatches.com/

    This is how the fly out menu look (wrong):
    http://rc-access.com/

    Changing the color is all I know how to do.

    There's only two things that need to be change.
    1. The category separation. It needs to have the small blue dots.
    2. Add a little arrow at the beginning of each category.

    Are there CSS codes that I can add directly to my original template and make the original category have a fly out menu function. I know you can do it, but I know little CSS. And that's why Zen Cart is a life saver to me.

    I have also, looked at template monster (dot) com, but found no template with an already built in flyout menu effect.

    Any help would be much appreciated. And if anyone know or sell a template with an already built in fly out menu effect that looks great the those templates from templatemonster (dot) com, let me know.

  2. #2
    Join Date
    May 2010
    Posts
    18
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    I meant the little white dots that separate the products, not the little blue dots.

  3. #3
    Join Date
    May 2010
    Posts
    18
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    My StyleSheet.CSS file is in the attachment, hope someone can help. Thank you.
    Attached Files Attached Files

  4. #4
    Join Date
    Jul 2006
    Location
    Montreal, Canada
    Posts
    2,279
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    open your stylesheet_cateogies_menu.css find and modify the following

    div#nav-cat li {
    background-color:#FCFCFC;
    border-bottom:1px dotted #C5C5C5;

    list-style:none outside none;
    margin:0;
    position:relative;
    z-index:1;
    }

    div#nav-cat {
    background-color:#FFFFFF;
    font-size:1.3em;
    font-weight:bold;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    padding:5px 10px 15px;
    width:100%;
    }

    add this to end of this stylesheet.

    #nav-cat li {
    background-image:url("../images/point.gif");
    background-position:left center;
    background-repeat:no-repeat;
    }


    lets do this first before fixing other stuff

  5. #5
    Join Date
    May 2010
    Posts
    18
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    Quote Originally Posted by tony_sar View Post
    open your stylesheet_cateogies_menu.css find and modify the following

    div#nav-cat li {
    background-color:#FCFCFC;
    border-bottom:1px dotted #C5C5C5;

    list-style:none outside none;
    margin:0;
    position:relative;
    z-index:1;
    }

    div#nav-cat {
    background-color:#FFFFFF;
    font-size:1.3em;
    font-weight:bold;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    padding:5px 10px 15px;
    width:100%;
    }

    add this to end of this stylesheet.

    #nav-cat li {
    background-image:url("../images/point.gif");
    background-position:left center;
    background-repeat:no-repeat;
    }


    lets do this first before fixing other stuff
    Thank you so much for your help! My flyout category now looks like this: http://rc-access.com/

    1. The problem is the little arrows only show when I do "text-align: center;" or "text-align: right;"

    When I do "text-align: left;" or no text-align at all, which is what I wanted to do, the arrows disappear.

    2. I would like the number of products to show up next to the category, just like the original category sidebox.

    All in all, I'm trying to make the flyout menu category look just like the original category.

    Thank you for your great help,
    Nam H. Vu

  6. #6
    Join Date
    May 2010
    Posts
    18
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    Also, I want to make the sub-menu similar to the main menu.

    1. The dotted line for the sub-menu needs to be a little shorter on both end. Just like the main category.

  7. #7
    Join Date
    Jul 2006
    Location
    Montreal, Canada
    Posts
    2,279
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    add this to your stylesheet.css . this will fix the text align issue

    #nav-cat li a:link {
    text-align:left;
    padding-left: 10px
    }

  8. #8
    Join Date
    May 2010
    Posts
    18
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    Quote Originally Posted by tony_sar View Post
    add this to your stylesheet.css . this will fix the text align issue

    #nav-cat li a:link {
    text-align:left;
    padding-left: 10px
    }
    Worked perfectly. Thanks!

    1. How do I make the product quantity show up next to the category?

    2. The flyout category is running out of its sidebox. What can I do to prevent this?

    3. The text-align above worked, but only for categories that have sub-category. What about the ones without sub-category?

    4. How do I indent the sub-category to make it look more like the main category?

  9. #9
    Join Date
    May 2010
    Posts
    18
    Plugin Contributions
    0

    Default Re: Flyout Menu CSS - Help!

    I've fixed problem #3 above. This is how my CSS style sheet look at the moment. It is in the attachment. Please take a look and help me fix the remaining problems above.
    Attached Files Attached Files

 

 

Similar Threads

  1. layout changed after installed CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Feb 2014, 04:02 PM
  2. v151 How to uninstall CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 15 Feb 2014, 07:39 AM
  3. Flyout Menu CSS - Help!
    By NathanLee0921 in forum Addon Templates
    Replies: 0
    Last Post: 23 May 2010, 08:58 AM
  4. CSS Flyout Menu, images help
    By nikki72 in forum Addon Sideboxes
    Replies: 1
    Last Post: 12 Jan 2009, 08:41 PM

Posting Permissions

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