Implementation code of universal Infinitus drop-down menu

This article mainly introduces the implementation code of the universal Infinitus drop-down menu. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

The drop-down menu is often used in my development. I encountered it, but every project needs to be written from scratch. Although it is simple to change, it is very troublesome. I am still relatively lazy. I have time today to sort out the menus in my previous project development and write a common version. No need to bother.

Features

The menu compiled today was developed by jquery css and has the following features:

1. Strong versatility

Previous There is a problem with a drop-down menu I am using. It requires separate settings for the main navigation and submenus. For example, the second-level menu is class="first_menu", the third-level menu is class="second_menu"....and so on, like this One problem with the way of writing is that it is not conducive for programmers to perform loop output. However, this menu only needs to introduce a CSS style, and there is no need to define a multi-level menu.

2. Beautiful automatic call of drop-down instructions

In the past, we manually added a drop-down display class to the drop-down menu, but now, we only need to define the drop-down in css Effect style, the code will automatically find the drop-down menu and add an indicator arrow;

3. Simple call

The programmer outputs the list simply and does not require a lot of judgment, just recursion Just call the menu data.

Implementation

1. HTML code

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

<ul class="Menue">

 <li class="Menue_li"><a href="#">首页</a></li>

 <li class="Menue_li"><a href="#">菜单一</a>

  <ul class="sub_menu">

   <li><a href="#">过山车</a></li>

   <li><a href="#">火山爆发</a></li>

   <li><a href="#">小小鸟</a></li>

  </ul>

 </li>

 <li class="Menue_li"><a href="#">菜单二</a>

  <ul class="sub_menu">

   <li><a href="#">关于我们</a>

    <ul class="sub_menu">

     <li><a href="#">山高地缘</a>

      <ul class="sub_menu">

       <li><a href="#">飞鸽传书</a></li>

       <li><a href="#">生生世世</a></li>

       <li><a href="#">飞黄腾达</a></li>

      </ul>

     </li>

     <li><a href="#">数据库</a>

      <ul class="sub_menu">

       <li><a href="#">数据库表</a></li>

       <li><a href="#">数据加密</a></li>

       <li><a href="#">数据建模</a></li>

      </ul>

     </li>

     <li><a href="#">C摄像头</a></li>

    </ul>

   </li>

   <li><a href="#">测试产品</a></li>

  </ul>

 </li>

</ul>

Some basic html codes are very simple. There is no need to explain the meaning of the code. Let me emphasize the code structure: whether it is the second level or the third level. Menus of one level or several levels are mainly nested ul; the name of the style sheet is also very simple, and the submenu is the "sub_menu" style, which is very conducive to the loop call of the program code.

2. CSS style

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; }

/*定义菜单*/

.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; }

/*下拉菜单样式*/

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 li.last { border-bottom:none; } /*js会对最后一个li添加该class，去掉border-bottom效果*/

.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 a.now { background:#f90;color:#fff;}

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

/*如果有下拉菜单添加的class*/

.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主导航箭头向下*/

.Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*下拉菜单箭头向右*/

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

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

I only emphasize two points of attention here:

1. The difference between absolute and relative in position

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

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

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

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

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

relative: Relative positioning, CSS writing method "position: relative;", refer to the "original point of the content area" of the parent as the original point, if there is no parent, use the "original point of the content area" of the Body as the original point , the position is determined by the Top, Right, Bottom, and Left attributes, and has the function of "expanding or occupying height".

The above two differences are very important and are a very common technique. They must be distinguished. I wasted a lot of time looking for problems during development because of these two attributes.

2. Use of background-position

Sometimes in order to improve website speed and facilitate website management, we often put some commonly used small pictures for beautification on a large picture. The css needs to be correspondingly small. This method can be used when using pictures. As long as you understand what it means, it is very convenient to call it. The clear point of this method is the image interception function. The usage is detailed as follows:

Syntax:

background-position: length || length

background -position : position || position

Value:

length : Percent| A length value composed of a floating point number and a unit identifier.

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

Description:
Set or retrieve the background image position of the object. The background-image attribute must be specified first. This property positioning is not affected by the object's padding setting. The default value is: 0% 0%. At this time, the background image will be positioned at the upper left corner of the content area of ​​the object excluding padding. If only one value is specified, that value will be used for the abscissa. The ordinate will default to 50%. If two values ​​are specified, the second value will be used for the ordinate. If the setting value is right center, because right as the abscissa value will override the center value, the background image will be positioned on 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 等价于 100% 100%

三、JS代码

本菜单是以jquery为基础的所以首先必须引入jquery代码库，然后编写如下JS代码实现下拉菜单。

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

 //为导航设置默认高亮 与本菜单无关

 $("ul.Menue li.Menue_li:eq(0)").addClass("current")

 /*jquery menu 开始*/

 //为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线

 $(".sub_menu").find("li:last-child").addClass("last")

 //遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态

 $(".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);

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

 },function(){

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

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

 });

 

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

 submenu.css({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 结束*/

})

</script>

通过以上步骤就实现了一个通用的多级菜单，上面代码是本人日常开发中的积累，由于本人水平有限可能存在着许多错误希望同僚们批评指正或提出更优化的代码供本人参考，谢谢。

The above is the detailed content of Implementation code of universal Infinitus drop-down menu. For more information, please follow other related articles on the PHP Chinese website!