submenu tiling (with background bar) for Web navigation menus

-

There was a problem with a small repository management site that was previously made to the company, where the process of resolving is documented.

The company's art requirements home navigation menu to their company's website style to keep consistent,

(Sub-menu is tiled)

When I look, I thought it was easy.

Paste the common menu HTML structure first

<li>
<a href= "" class= "abc" > Thermal design </a>
<ul>
<li><a href= "" > Design code </a></li>
<li><a href= "" > Case sharing </a></li>
<li><a href= "" > Experience Articles </a></li>

</ul>

</li>

Just set the submenu's <li>css to Float:left, and set the background for <ul>.

But the realization of the time to find it is not easy, because the <ul> position is based on the first level menu <li> location, so <ul> background bar will only start from the first level of the <li> position of the menu, will not display the banner (the background bar will fill the page)

So I want to give the submenu of the <ul> outside to pack a layer of <div> and set <div> position:absolute;  left:0; top:0 and cancel the Position:relative property of the first level menu <li>

And finally get this result

Although the background bar is full, the submenu is not aligned with the first-level menu.

Usually the settings and menu <li> are position:relative, and the submenu <ul> (or the div of this example) is Position:absolute, (offset how many can set left and top) This allows the submenu to be aligned with the parent menu,

However, in order to set the background of the banner, the first level menu <li> position:relative property is removed, which prevents the submenu from tracking the parent menu;

So the assumption is still to set a level menu <li> for position:relative, and set Div to position:fixed (position is fixed only according to the entire screen layout, and always hover, Whether the position of the parent container is relative and not affected)

At the same time set the submenu of <ul> as Position:absolute, the intention is to let the submenu <ul> cross its parent container <div>, and to trace the ancestor container (that is, the first-level menu <li> ) Location (because it is known that the container's position is set to absolute, it will go to find whether the parent container is set to position for relative, if it is set to position according to its location, if not set to continue to the upper ancestor container to find, if not set, is positioned according to the page)

Results

The submenu is all moved to the far left (because left:0 is set), the submenu does not track the <li> of the first-level menu, but instead follows the location of the parent container <div>, which means that the parent container sets the Position property, regardless of whether it is relative , the child container is positioned according to its position.

This logically determines that CSS alone cannot achieve the desired effect.

{

1 to set the background as a banner, you can only set the div to positon:absolute;left:0, and you cannot set the Position property of the first level menu <li>;

2 to have the submenu track the location of the parent menu, you must set the position:relative of the parent menu and set the submenu Position:absolute;

1 and 2 contradict each other

}

So we can only find another way, that is, jquery.

jquery has a method called offset () that can get the position of an element (if the element is positioned based on the position of the parent element, where the method obtains a position relative to the parent element, or the position relative to the entire screen)

such as Element P, var pos=p.offset (), POS has two properties: P.top, P.left, according to the literal meaning can understand its meaning, and offset (top:x;top:y) can dynamically set the position of the element

We positioned the submenu in the hover event of the menu, as shown in the code below

  var_this1 =NULL; $('. Nav>li'). Hover (function () {_THIS1= $( This); _this1.find ('. Second-nav'). Show ();  var p = _this1.offset (); _this1.find ('. Second-nav'). Find ('ul'). Offset ({top:p.top+, left:p.left-  }) _this1.find ('. ABC'). CSS ('Color','#ff6a00')                var_this2 =NULL; _this1.find ('. Second-nav'). Find ('Li'). Hover (function () {_this2= $( This); _this2.find ('. Third-nav'). Show (); _this2.find ('. Third-nav'). Hover (function () {$ ( This). Show (); }, Function () {$ ( This). Hide ();                }); }, Function () {_this2.find ('. Third-nav'). Hide ();            }); }, Function () {_this1.find ('. Second-nav'). Hide (); _this1.find ('. ABC'). CSS ('Color','#fff')            });

Where Bold Italic is the new addition of two lines of code (the other code is the original navigation menu), where the _this variable is the mouse over the first level menu title of the <li>

_this.offset () Gets the position of the current active caption relative to the screen, and stores the variable p, and then

_this1.find ('. Second-nav '). Find (' ul '). Offset ({top:p.top+50,left:p.left-50})

Then locate the descendant elements <ul> apply the offset (top:x,left:y) method according to _this, and finally get the desired results.

Now, this is really not a problem, the solution is very simple, if you know enough about jquery

Of course, this is something, it was still tangled for a long time, the mentality of the course is very tortuous haha.

Still need to make basic science solid.

submenu tiling (with background bar) for Web navigation menus