Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

#1 02-24-2017 16:00:34

larry
Member
Registered: 07-21-2003
Posts: 437

Nav Bar Flyouts help

We're using 'NavBar Header/Menu - Hover Display' in SIDEBAR1 for our Categories.   The first flyout for subcategories appears directly under the main category when hovered over.  We need it to fly out to the right.  Oddly, the 2nd flyout (subcategory of a subcategory) appears the way we want it to. 

So what CSS do I change for the first flyout so it appears to the right, just as the 2nd (and subsequent) flyout does?


Laurie Stephens




Offline

 

#2 02-27-2017 09:46:23

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19546
Website

Re: Nav Bar Flyouts help

Can you post a URL so I can get you proper CSS based on your layout?  Will be easy to do if I can load your site up in firebug.  Thanks.


Nick Hendler

Offline

 

#3 02-27-2017 11:18:21

larry
Member
Registered: 07-21-2003
Posts: 437

Re: Nav Bar Flyouts help

Sorry.  Our Dev site is local only.  Obviously I'm not good at using firebug and only know enough css to be dangerous.

I DID find that changing the left margin to 5em slightly helps.  Now we can mouse over the entire main menu without having the submenus in the way.   But that margin is entirely dependent on the shortest main menu text.   Would love the display: block be the same max width for every main menu item, but can't figure out how to do that.  that way, we can set the margin correctly so the submenu is directly adjacent to the main menu on the right.

@media all and (min-width: 960px) {

         .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover {display: block;
        .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul {margin: -2em 0 0 5em; }


Laurie Stephens




Offline

 

#4 02-28-2017 04:25:12

west4
Member
From: UK
Registered: 04-16-2008
Posts: 639
Website

Re: Nav Bar Flyouts help

Hi Larry,

You might want to make sure your are using absolute positioning of the sub-menus relative to the main menu

Make sure 'position: relative;' is set for the main menu and 'position: absolute;' is set for sub-menus.

Cheers,
Bruce.


I'd rather have a full bottle in front of me, than a full frontal labotomy.

Offline

 

#5 02-28-2017 08:24:49

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19546
Website

Re: Nav Bar Flyouts help

@larry: Are you missing the closing bracket in your CSS on the first line, or is that just missing here on the forum?  Also, I want to be sure you copied that code into your skin's all.css to do the override and you didn't edit directly in common.min.css.  You're looking at the right spot.  Something like this might work:

margin: 0 0 0 -100%; right: 0;

Probably not, but gives you ideas of things to try.


Nick Hendler

Offline

 

#6 02-28-2017 11:01:33

larry
Member
Registered: 07-21-2003
Posts: 437

Re: Nav Bar Flyouts help

Here's the entire section.  it is in our skin override all.min.css.   learned my lesson the last time updating the base css file.  ; > }
I did fat finger the original code.  this one I believe has the correct syntax.

Code:

 @media all and (min-width: 960px) {

   
      .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover {display: block;}
        .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul {margin: -2em 0 0 5em; }
  
}

Bruce, is the positioning that you refer to on the ul or the li: hover?


Laurie Stephens




Offline

 

#7 03-01-2017 04:15:04

west4
Member
From: UK
Registered: 04-16-2008
Posts: 639
Website

Re: Nav Bar Flyouts help

Hi Larry,

A quick explanation: Position

The concept to grasp here is position: relative vs. position: absolute. Normally if you apply a position: absolute to a element it will be absolutely positioned with respect to the browser window regardless of where it appears in the html stream. What we want to do is absolutely position the sub menu with respect to the parent LI element. In order to get this behaviour we apply a position: relative to the parent LI and then apply a position: absolute to the child UL. This technique not only works well for fly-out menus but all other HTML elements as well.

So...EXAMPLE MENU WITH FLY-OUT

Code:

#cssmenu ul {
position: relative;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li:hover {
position: relative;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden; /* hide sub menus by default */
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
#cssmenu ul ul ul {
top: 0px;
left: 99%;
}
#cssmenu ul li:hover > ul {
visibility: visible; /* show sub menu */
}
#cssmenu ul ul {
top: 0px;
left: 99%;
}

HERE IS ANOTHER NICE EXAMPLE

Code:

   
/* Define the body style */
body {
    font-family:Arial;
    font-size:12px;
}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    background-color:#7f95db;
    border-bottom:solid 1px white;
    width:150px;
    cursor:pointer;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:5px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:150px;
    top:0px;
    display:block;
}

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
    background-color:#cae25a;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:#b1b536;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:120px;
}

/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
    position:absolute;
    display:none;
}

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
    display:block;
    left:150px;
    top:0;
}

/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
    background:#86d3fa;
}

/* We change the background color for the level 3 submenu when hovering the menu */

#menuwrapper ul li:hover ul li:hover ul li:hover{
    background:#358ebc;
}

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
    color:#ffffff;
}

/* Clear float */
.clear{
    clear:both;
}

the relative position is your main menu and the absolute is your fly-out sub menu.

Hope this helps.

Cheers,
Bruce.

Last edited by west4 (03-01-2017 04:24:48)


I'd rather have a full bottle in front of me, than a full frontal labotomy.

Offline

 

#8 03-01-2017 07:55:12

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19546
Website

Re: Nav Bar Flyouts help

So, west4 is recommending something like this:

Code:

@media all and (min-width: 960px) {

.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover {display: block; position: relative;}
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul {position: absolute; right: 0;}
  
}

Nick Hendler

Offline

 

#9 03-01-2017 10:32:15

west4
Member
From: UK
Registered: 04-16-2008
Posts: 639
Website

Re: Nav Bar Flyouts help

oops sorry Nick, I do believe I am...


Cheers,
Bruce.


I'd rather have a full bottle in front of me, than a full frontal labotomy.

Offline

 

#10 03-01-2017 10:44:11

larry
Member
Registered: 07-21-2003
Posts: 437

Re: Nav Bar Flyouts help

Thank you both!


Laurie Stephens




Offline

 

Board footer