客房导航菜单栏

开发工具与关键技术：VS   后端

作者：陈芝番                                                                           

撰写时间：2019.5.14

导航菜单栏一般有图标导航，下拉导航，风格导航，隐藏侧边栏导航菜单等，各有各的特点。

1）图标导航：icon表示图标，可以清晰的了解到其图标的含义，a标签表示能触发点击跳转事件，ul表示无序列表。

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

实现的图标导航效果如下：

2）下拉导航：鼠标移入，触发点击事件；鼠标移出，下拉菜单栏收缩。

当然还可以实现多次下拉导航，像这样<li><a href="#"></a><ul><li><a href="#"> </a></li>

<ul><li><a href="#"> </a></li></ul></li></ul></li>，这样就可以在里面实现多次下拉导航。

<li><a href="#">报表中心</a>

<ul>

<li><a href="#">结账明细表</a></li>

<li><a href="#">结账汇总表</a></li>

<li><a href="#">收银员明细表</a></li>

<li><a href="#">消费分类明细表</a></li>

<li><a href="#">消费分类汇总表</a></li>

<li><a href="#">押金明细表</a></li>

<li><a href="#">押金明细表（收银员）</a></li>

<li><a href="#">账户余额表 （汇总）</a></li>

<li><a href="#">账户余额表（明细）</a></li>

<li><a href="#">当前退房报表 </a></li>

<li><a href="#">当前在住房报表 </a></li>

<li><a href="#">当日开房报表 </a></li>

</ul></li>

下拉导航实现效果如下：

 

3）风格导航：顾名思义格子导航，鼠标移入，触发点击事件；单击触发点击事件，显示该页面。

<ul class="menu"><li>

<span class="title">501 标双</span>

<div class="content">账号：A20190814,房号：501 ,姓名：黎明,房价：359，00,抵店日期：2006-2-27,离店日期：2006-2-29,支付500.00,消费：359.00,余额：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>

风格导航实现效果如下：

 

单击触发点击事件效果：

4）隐藏侧边栏导航菜单：给它一个a标签，触发点击跳转，原理上面三个导航菜单栏类似，在href中给它跳转的路径类名就可以了。

结语：导航菜单栏方法多种，图标导航，下拉导航，风格导航，隐藏侧边栏导航菜单，但它们原理一样，都离不开<li><a href="#"></a><ul><li><a href="#"> </a></li>

<ul><li><a href="#"> </a></li></ul></li></ul></li>，a标签主要是触发点击事件。