Development tools and key technologies: VS backend
Author: Chen Chi Fan
Write Time: 2019.5.14
General navigation menu bar icons navigation, dropdown navigation, navigation style, hidden sidebar navigation menu and so on, each have their own characteristics.
1) navigation icon: icon representation icon, you can clearly understand the meaning of the icon, a label indicates trigger Clicked event, ul unordered list.
<nav>
<ul>
<li><a href="#section-bar-1" class="icon-home"><span>实时房态</span></a></li>
<li><a href="#section-bar-2" class="icon icon-box"><span>客人预订</span></a></li>
<li><a href="#section-bar-3" class="icon icon-display"><span>客人登记</span></a></li>
<li><a href="#section-bar-4" class="icon icon-upload"><span>客人续住</span></a></li>
<li><a href="#section-bar-5" class="icon icon-tools"><span>消费入单</span></a></li>
</ul>
</nav>
To achieve the effect of navigation icons as follows:
2) the drop-down navigation: move the mouse, click the trigger event; the mouse out, shrinking the drop-down menu bar.
Of course, multiple pull-down navigation may also be implemented, such as <li> <a href="#"> </a> <ul> <li> <a href="#"> </a> </ li>
<Ul> <li> <a href="#"> </a> </ li> </ ul> </ li> </ ul> </ li>, this can be achieved in a plurality of times inside the drop-down navigation.
<Li> <a href="#"> Report Center </a>
<ul>
<Li> <a href="#"> checkout Schedule </a> </ li>
<Li> <a href="#"> billing summary table </a> </ li>
<Li> <a href="#"> cashier Schedule </a> </ li>
<Li> <a href="#"> consumer classification schedule </a> </ li>
<Li> <a href="#"> consumption subtotals table </a> </ li>
<Li> <a href="#"> required schedule </a> </ li>
<Li> <a href="#"> required schedule (cashier) </a> </ li>
<Li> <a href="#"> account balance table (Summary) </a> </ li>
<Li> <a href="#"> account balance table (detail) </a> </ li>
<Li> <a href="#"> current check-out report </a> </ li>
<Li> <a href="#"> currently housing report </a> </ li>
<Li> <a href="#"> day open house reports </a> </ li>
</ul></li>
Drop-down navigation achieve results is as follows:
3) style navigation: As the name suggests plaid navigation, mouse move, click to trigger events; click click event trigger, display the page.
<ul class="menu"><li>
<span class="title">501 标双</span>
<Div class = "content"> Account: A20190814, house number: 501 Name: Dawn, Rate: 359,00, Arrival Date: 2006-2-27, Check-out: 2006-2-29 pay 500.00, consumption: 359.00, balance: 141.00 </ div> </ li> <li>
<span class="title">502 标单</span>
<div class="content"></div></li><li>
<span class="title">503 高单</span>
<div class="content"></div></li><li>
<span class="title">504 高双</span>
<div class="content"></div></li><li>
<span class="title">505 豪商双</span>
<div class="content"></div></li><li>
<span class="title">506 豪商单</span>
<div class="content"></div></li><li>
<span class="title">507 标单</span>
<div class="content"></div></li><li>
<span class="title">508 标双</span>
<div class="content"></div></li><li>
<span class="title">509 高单</span>
<div class="content"></div></li></ul>
Style navigation achieve results is as follows:
Click the Click event trigger effect:
4) hide the sidebar navigation menu: a label to give it a trigger click to jump, similar to the above principle three navigation menu bar, jump to it in the href path class name on it.
Conclusion: navigation method for a variety of menu bars, navigation icons, drop-down navigation, navigation style, hidden sidebar navigation menu, but the same principle they are inseparable <li> <a href="#"> </a> < ul> <li> <a href="#"> </a> </ li>
<ul><li><a href="#"> </a></li></ul></li></ul></li>，a标签主要是触发点击事件。