How does zblog do drop-down navigation? Method of making zblogphp pull-down navigation menu

Many friends think that they should need the pull-down menu (this is a joke...). This article simply tells how to implement zblog Pull down navigation menu Of.

This tutorial is only limited to the zblogphp program, and zblogasp will talk about it later.

First of all, the code for css is as follows:

 #nav{font-size:14px;font-weight:700;background-color: #333333; width: 970px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border-radius: 4px; padding-right: 5px; padding-left: 5px; position:relative;  z-index:1} #nav ul{height: 40px;line-height: 40px; overflow: hidden;} #nav ul li{float:left;border-right-width: 1px; border-right-style: solid; border-right-color: #222; width: 100px;} #nav ul li a{display:block;text-align:center;color:#FFF;line-height: 40px;} #nav ul li a:hover,#nav ul li a.on{color:#fff; background-color:#d31f07;} #nav li ul{line-height: 35px;list-style-type: none; left: -999em; position: absolute; width: 100px; padding-top: 0px; overflow: visible;} #nav li ul li{float: left;border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; background-color: #333333; border-bottom-style: solid; border-bottom-color: #111111;} #nav li ul li a{display: block;text-align:center;width: 100px; padding: 0px; background-image: none; line-height: 40px; height: 40px; font-weight: normal;} #nav li ul a:hover{color:#ffffff;text-decoration:none;font-weight:normal;background-color: #d31f07;} #nav li:hover ul{left: auto;} #nav li.sfhover ul{left: auto;}

The html part is as follows:

 <div id="nav"><ul><li><a href="{$host}">Home</a></li>{module: catalog}</ul></div>

It is implemented in pure css, so the js part is not needed. However, it should be explained in detail that the "{module: catalog}" in the above html code calls the website classification. When there is a subcategory (secondary classification) under a certain classification, the drop-down navigation automatically appears, which is very convenient.

However, there is a defect in this way, that is, the single page of the website, such as the message book and about us, cannot appear on the navigation bar. Because the website classification is called instead of the navigation bar, the students who need it can change the html code part to this:

 <div id="nav"><ul><li><a href="{$host}">Home</a></li>{module: navbar}</ul></div>

Then go to the website background - module management - navigation bar to set the drop-down navigation. The basic style is as follows:

 <li><a href="#">First level navigation</a><ul><li><a href="#">Second level navigation 1</a></li><li><a href="#">Second level navigation 2</a></li></ul></li>

Ok, end this article willfully. If you have any questions, please leave a message on the comment page below. If you are a trench, please directly contact my online QQ: 1109856918 payment guidance or help