SoFunction
Updated on 2025-04-07

Implementation code for the universal Infinitus drop-down menu

The drop-down menu is often encountered in my development, but no project needs to be re-written. Although it is simple but very troublesome to modify it, I am still relatively lazy. Today I have time to organize the menus in my previous project development and write a general version. I won’t need to be so troublesome in the future.

Features

The menu compiled today is developed by jquery+css with the following characteristics:

1. Strong versatility

There was a problem with a drop-down menu I used before, and the main navigation and submenu need to be set separately. For example, the second-level menu is class="first_menu", the third-level menu is class="second_menu"... and so on. There is a problem with this writing method, which is that it is not conducive to programmers performing loop output. This menu only needs to introduce a CSS style, without the need to define a multi-level menu.

2. Beautiful automatic call pull-down instructions

In the past, we would add a drop-down class to the drop-down menu manually. Now, we only need to define the style of the drop-down effect in the css, and the code will automatically look for the drop-down menu and add indicator arrows;

3. Simple call

The programmer output list is simple and does not require much judgment, just call the menu data recursively.

accomplish

1. HTML code

First, we output menu data on the page, which consists of ul and li to form a menu list. The specific structure code is as follows:

<ul class="Menue">

 &lt;li class="Menue_li"&gt;&lt;a href="#">Home</a></li>
 &lt;li class="Menue_li"&gt;&lt;a href="#">Menu One</a>
  &lt;ul class="sub_menu"&gt;

   &lt;li&gt;&lt;a href="#">Rock Coaster</a></li>
   &lt;li&gt;&lt;a href="#">Volcanic eruption</a></li>
   &lt;li&gt;&lt;a href="#">Little Bird</a></li>
  &lt;/ul&gt;

 &lt;/li&gt;

 &lt;li class="Menue_li"&gt;&lt;a href="#">Menu Two</a>
  &lt;ul class="sub_menu"&gt;

   &lt;li&gt;&lt;a href="#">About Us</a>
    &lt;ul class="sub_menu"&gt;

     &lt;li&gt;&lt;a href="#">Geoing mountains</a>
      &lt;ul class="sub_menu"&gt;

       &lt;li&gt;&lt;a href="#">Flying pigeons pass on letters</a></li>
       &lt;li&gt;&lt;a href="#">Birth of life</a></li>
       &lt;li&gt;&lt;a href="#">Successful</a></li>
      &lt;/ul&gt;

     &lt;/li&gt;

     &lt;li&gt;&lt;a href="#">Database</a>
      &lt;ul class="sub_menu"&gt;

       &lt;li&gt;&lt;a href="#">Database table</a></li>
       &lt;li&gt;&lt;a href="#">Data encryption</a></li>
       &lt;li&gt;&lt;a href="#">Data Modeling</a></li>
      &lt;/ul&gt;

     &lt;/li&gt;

     &lt;li&gt;&lt;a href="#">C Camera</a></li>
    &lt;/ul&gt;

   &lt;/li&gt;

   &lt;li&gt;&lt;a href="#">Test Products</a></li>
  &lt;/ul&gt;

 &lt;/li&gt;

&lt;/ul&gt;

Some basic html codes are simple and do not need to explain the meaning of the code. They emphasize the code structure: whether the second level, third level or several level menus are mainly nested ul; the style sheet name is also very single, and the submenu is the "sub_menu" style, which is very conducive to program code loop calls.

2. CSS style

The Css style code is also very simple, the specific code is as follows:

a { text-decoration:none; }

ul, li { list-style:none; margin:0; padding:0; }

/*Definition menu*/

.Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }

.Menue li a { color:#fff; font-size:14px; display:block; }

/*Drop down menu style*/

ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }

.Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }

.Menue li ul.sub_menu  { border-bottom:none; } /*js will add this class to the last li, remove the border-bottom effect*/

.Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }

.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li  { background:#f90;color:#fff;}

.Menue ,.Menue  { background:#f60;color:#fff;}

/*If there is a class added by the drop-down menu*/

.hasmenu { background:url() no-repeat right; padding-right:15px;}/*The main navigation arrow goes down*/

.Menue li  { background:url() no-repeat right; padding-right:15px;background-position:right -30px;}/*Drop down menu arrow to the right*/

.Menue li ul.sub_menu li  { background:#222 url() no-repeat right top;}

.Menue li ul.sub_menu li :hover { background:#f90 url() no-repeat right top; color:#fff;}

Here I will only emphasize two precautions:

1. The difference between absolute and relative in position

absolute: absolute positioning, CSS is written as " position: absolute; ", and its positioning is divided into two situations, as follows:

A. If Top, Right, Bottom, and Left are not set, the default is to the original point based on the parent's "content area original point".

B. There are cases where Top, Right, Bottom, and Left are set. There are two situations as follows:

(1). The parent does not have a position attribute, and the upper left corner of the browser (i.e. Body) is the "original coordinate point" for positioning. The position is determined by the Top, Right, Bottom, and Left attributes.

(2). The parent has a position attribute, and the parent's "coordinate original point" is the original point.

relative: relative positioning, CSS is written as "position: relative;", referring to the parent's "content area original point" as the original point, and without a parent, the Body's "content area original point" as the original point. The position is determined by the Top, Right, Bottom, and Left attributes, and it has the function of "stretching or occupying height".

The above two differences are very important and are a very common technique. You must distinguish them. I have wasted a lot of time in development and found problems. In fact, it is caused by these two attributes.

2. Use background-position

Sometimes, in order to improve the speed of the website and facilitate website management, we often place some commonly used small pictures on a large picture. When css needs corresponding small pictures, it can be achieved through this method. As long as we understand what it means, it is very convenient to call. This method explains that the white dot is the image interception function. The usage details are as follows:

grammar:

background-position : length || length

background-position : position || position

Value:

length : Percent | The length value consisting of floating point numbers and unit identifiers.

position :top | center | bottom | left | center | right

illustrate:
Sets or retrieves the object's background image location. The background-image property must be specified first. This attribute positioning is not affected by the object's patch attribute ( padding ) settings. The default value is: 0% 0%. At this time, the background image will be positioned in the upper left corner of the content area where the object does not include patches (padding). If only one value is specified, the value will be used for the horizontal coordinates. The ordinate will default to 50%. If two values ​​are specified, the second value is used for the ordinate. If the value is set to right center , because right as the horizontal axis value will override the center value, the background image will be positioned to the right. Here are some equations

top left, left top is equivalent to 0% 0%.

top, top center, center top is equivalent to 50% 0%.

right top, top right is equivalent to 100% 0%.

left, left center, center left is equivalent to 0% 50%.

Center, center center is equivalent to 50% 50%.

right, right center, center right is equivalent to 100% 50%.

bottom left, left bottom is equivalent to 0% 100%.

bottom, bottom center, center bottom is equivalent to 50% 100%.

bottom right, right bottom is equivalent to 100% 100%

3. JS code

This menu is based on jquery, so first you must introduce the jquery code base, and then write the following JS code to implement the drop-down menu.

&lt;script src="js/"&gt;&lt;/script&gt;

&lt;script&gt;

$(document).ready(function(){

 //Set default highlighting for navigation has nothing to do with this menu
 $(" li.Menue_li:eq(0)").addClass("current")

 /*jquery menu start*/

 //Add style to the last li of the submenu, suitable for removing the last underline when adding underline to li
 $(".sub_menu").find("li:last-child").addClass("last")

 //Travel through all li to determine whether the submenu is included. If it is included, add an arrow to indicate the status.
 $(".Menue li").each(function(){

 if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}

 })

 

 //

 $(".Menue li").hover(function(){

 $(this).addClass("now");

 var menu = $(this);

  ("ul.sub_menu:first").show();

 },function(){

 $(this).removeClass("now");

 $(this).find("ul.sub_menu:first").hide();

 });

 

 var submenu = $(".sub_menu").find(".sub_menu")

 ({left:"100px",top:"0px"})

 $(".sub_menu li").hover(function(){

 $(this).find("a:first").addClass("now")

 $(this).find("ul:first").show();

 },function(){

 $(this).find("a:first").removeClass("now")

 $(this).find("ul:first").hide()

 });

/*jquery menu end*/

})

&lt;/script&gt;

Through the above steps, a general multi-level menu is realized. The above code is the accumulation of my daily development. Due to my limited level, there may be many mistakes. I hope my colleagues will criticize and correct or propose more optimized codes for my reference. Thank you.

The above implementation code of the universal Infinitus drop-down menu is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.