can i insert flyout menu?

raja

Avatar: raja

2013-02-20 07:56

can i insert multi level fly out (pop up) menu in left column (product categories)?

» Quick.Cart v6.x

braj

interkob

Avatar: interkob

2013-02-20 08:51

You can. You see an example below.

Open templates/default/style.css and change the following code with the next one.

Your code:

#menu3{padding:0 20px 10px;}
#column .type{margin-top:10px;padding:5px 13px 10px;font-size:1.667em;font-weight:bold;color:#fff;background:#c22463 url('img/menu3_bg.png') no-repeat left bottom;text-shadow:0px 1px 1px rgba(103,11,48,0.3),0px 2px 3px rgba(103,11,48,0.2),0px 3px 4px rgba(103,11,48,0.1);}

/* LEFT MENU */
#menu3 ul{padding:10px 0;list-style:none;background:#fff;}
#menu3 li{margin:0 3px;padding:4px 0 4px 13px;border-bottom:1px solid #e0e0e0;}
#menu3 a{display:block;width:100%;padding:4px 0;color:#666;font-weight:bold;text-decoration:none;background:none;text-shadow:0px 1px 1px #fff,0px 2px 3px #eee,0px 3px 4px #ddd;}
#menu3 a:hover, #menu3 .sub1 a:hover{color:#c22463;background:none;text-decoration:underline;}
#menu3 .selected > a:first-child{color:#c22463;background:none;}

#menu3 .sub1{margin:0;padding:0;border:0;background:none;}
#menu3 .sub1 li{padding:2px 0 2px 20px;background:url('img/menu3_sub.gif') no-repeat 7px 8px;border:0px;}
#menu3 .sub1 a{display:block;width:100%;padding:2px 0;font-weight:normal;}


Your new code:

#menu3 {padding:0 20px;}
#column .type{margin-top:10px;padding:5px 13px 10px;font-size:1.667em;font-weight:bold;color:#fff;background:#c22463 url('img/menu3_bg.png') no-repeat left bottom;text-shadow:0px 1px 1px rgba(103,11,48,0.3),0px 2px 3px rgba(103,11,48,0.2),0px 3px 4px rgba(103,11,48,0.1);}

/* LEFT MENU */
#menu3 ul {float:left; padding:10px 0 0 12px; list-style:none; position:absolute; z-index:500; font-size:13px; font-family: arial, verdana, sans-serif; width:192px;}
#menu3 ul li {float:left; display:block;}
#menu3 ul li a {display:block; float:left; height:30px; line-height:30px; color:#333; text-decoration:none; border-top:1px solid #d0caca;background:inherit;color:#cc0000;font-size:1.083em;text-decoration:none; cursor:pointer; width:200px; padding:0 0 0 5px;}
#menu3 ul li a:hover {color:#fff; background:#FF6600;}
#menu3 ul li .selected {color:#fff; background:#FF6600; cursor:default;}
#menu3 ul ul {position:absolute; left:-9999px; top:-9999px; padding:0; margin:0; list-style:none; background: #fc0 url(img/dropbg.gif); padding:10px 0; white-space:nowrap; height:auto; width:auto; z-index:300; text-align:left;}
#menu3 ul li:hover {position:relative; z-index:300;}
#menu3 ul a:hover {position:relative; z-index:300; background: transparent; font-weight:normal;}
#menu3 ul :hover ul {left:-5px; margin-left:100%; top:0; border:1px solid #fff; border-color:#fff #ccc #aaa #eee;}
#menu3 ul :hover ul li a:hover {text-decoration:underline;}
#menu3 ul li:hover li:hover > ul {left:-10px; margin-left:100%; top:-10px; border:1px solid #fff; border-color:#fff #ccc #aaa #eee;}
#menu3 ul li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
#menu3 ul li:hover li:hover > a {text-decoration:underline; font-weight:normal;}
#menu3 ul :hover ul li {float:none; background:transparent;}
#menu3 ul a:hover ul li {float:left;}
#menu3 ul :hover ul li a {display:block; font-size:12px; height:18px; line-height:18px; width:auto; padding:0 10px; color:#000; text-decoration:none; text-align:left;}
#menu3 ul a:hover a:hover ul, #menu3 a:hover a:hover a:hover ul{left:100%; top:-10px; border:1px solid #fff; border-color:#fff #ccc #aaa #eee;}
#menu3 ul a:hover ul ul, #menu3 a:hover a:hover ul ul {position:absolute; left:-9999px; top:-9999px;}
#menu3 ul .sub1 li a, #menu3 .sub2 li a {float:none; border:none;}
#menu3 ul .sub1 li a:hover, #menu3 .sub2 li a:hover { background:none;}
#menu3 ul li:hover > a {color:#fff; background:#FF6600;}
#menu3 ul .sub1 li:hover > a, #menu3 .sub2 li:hover > a {background:none;}



And if you like to see more levels, than go to _header.php file and change the number 1 to 2 or higher. See for the line below:

echo $oPage->throwMenu( 3, $iContent, 1 ); // content of left menu ?>

!! And don't forget to set to YES the function "Show expanded menu" in admin side.

Back to top
about us | contact