5鼠标样式_盘点网站设计制作中常用的导航样式

1、传统下拉菜单设计

经典的下拉菜单设计，你会在很多网站里面看到这种设计，搭配主题色调可以让导航在网站中一目了然，清晰可见，鼠标经过一级菜单时，会有二级菜单下拉展示，对于传统企业网站来说是一种简单高效的设计方式。

传统下拉菜单设计

2、鼠标悬停下划线设计

鼠标悬停下划线展示设计，在传统下拉菜单设计的基础上，去掉了背景色，鼠标经过导航通过下划线标识设计，让导航看起来更加简洁明快，提升整个网站的简洁感，适用于注重简洁性设计排版的网站。

鼠标悬停下划线设计

3、椭圆型背景悬停设计

椭圆型背景悬停设计，与鼠标悬停下划线设计类似，区别在于鼠标悬停显示下划线改成了背景色，如果说下划线是弱提醒，那么背景色就是强提醒设计了，更加得醒目、突出。

椭圆型背景悬停设计

4、面包屑侧边导航设计

面包屑侧边导航设计，默认是一个面包屑图标悬浮在侧边，点击图标从侧边展开菜单的一种导航设计方式。通常应用在引导页或单屏网页设计上，可以优化导航空间，突出图片设计。

面包屑侧边导航设计

5、全屏导航设计

全屏导航设计和面包屑侧边导航设计也是类似的应用，区别于导航展开的样式，全屏导航通过背景色的半透明设计遮罩，让导航看起来更大气。

全屏导航设计

6、横向半透明二级菜单设计

横向半透明二级菜单设计，当鼠标悬停在一级菜单时，二级菜单横向排列设计，并且给二级菜单一个半透明的背景色显示，适用于只有一二级菜单，且二级菜单比较多的网站。

横向半透明二级菜单设计

7、带副标题全屏二三级菜单设计

如果你的网站要显示三级菜单，怎么设计才合适？这款带副标题全屏二三级菜单设计可以作为参考：一级菜单显示主标题、副标题，鼠标悬停时，通过灰色的全屏背景色大块承载二三级菜单，一目了然，同时又不失简洁高端。

带副标题全屏二三级菜单设计

8、圆点二三级菜单设计

前面说到全屏二三级菜单设计，适用于二三级菜单比较多的网站，如果你网站的二三级菜单不多，那可以用这种圆点二三级菜单设计。鼠标悬停在一级菜单时，会先出现二级菜单，而单鼠标悬停在二级菜单时，二级菜单右侧箭头显示，同时会显示该二级菜单下的三级菜单，通过层级相扣来引导用户查找菜单。

圆点二三级菜单设计

9、L型二三级菜单设计

L型二三级菜单设计，与全屏二三级菜单设计类似，区别于二三级菜单的排版设计，L型二三级菜单设计去除了全屏灰色背景块，用一小块灰色背景包围二三级菜单，宽高自适应设计，L型二三级菜单设计适用于不同一级菜单下二三级菜单数量不统一的网站。

L型二三级菜单设计