纯CSS实现的HTML5响应式导航栏的方法和技巧

有很多方法可以在html5中实现响应式导航栏，如何使用纯CSS实现此功能，这里我将通过示例向您解释由纯CSS和技能实现的HTML5响应式导航栏的方法。

当前，响应测试网页已逐渐流行。除了页面内容和布局结构的响应测试之外，剩下的重点是实现导航栏的响应测试。当然，有很多方法，但是我最近发现了一种新方法。无需使用Javascript，即可轻松实现响应导航栏的技术。它使用简单的html5标签结构来实现响应式导航栏。导航栏可以在左侧，中间和右侧轻松控制。当鼠标经过导航栏时，它将平滑地拉菜单。不仅如此，响应式导航栏还可以在手机屏幕和IE浏览器上正常运行。

本文的目的是让每个人都知道如何将普通的导航栏变成一个小的，可伸缩的下拉菜单。

此技术非常适用于多列导航栏。如下图所示，您可以将所有导航栏压缩为一个优雅的菜单按钮。

HTML5导航标签结构

如果要使用纯CSS来实现此效果，则应首先使用标签，该标签是必须用于创建CSS下拉框的结构。使用.current类标记当前菜单项。 HTML5导航标签结构

/* right nav */
.nav.right ul {
    text-align: right;
}
 
/* center nav */
.nav.center ul {
    text-align: center;
}

CSS属性

首先，下面使用的CSS属性与我们通常看到的方法没有什么不同。我不再赘述，但我们注意到在nav ui li元素中使用了display：inline-block；此属性替换了原来常用的float：left属性，这是不同的。

使用display：inline-block方法后，我们可以在转换后自由调整菜单按钮的位置。如果要更改按钮的位置，我们只需要将text-align添加到nav ul元素：left;文本对齐：居中；或text-align：right;

<--[if lt IE 9]>
    
    

提供对旧版本浏览器的支持

我们都知道IE8的早期版本无法在html5中提供对标签和媒体查询方法的支持，因此我们在使用前应添加css3-mediaqueries.js（或response.js）和html5shim。 js两个脚本提供相应的后备支持。

最后，添加了媒体查询检测方法以标识屏幕宽度。在这里，设置了一个600px的断点，这意味着当浏览器或屏幕宽度小于600px像素时，将使用CSS属性。

@media screen and (max-width: 600px){
    .nav {
        position: relative;
        min-height: 40px;
    }
    .nav ul {
        width: 180px;
        padding: 50px 0;
        position: absolute;
        top: 0px;
        left: 0px;
        border: 1px solid #aaa;
        background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .nav li {
        display:none; /* hide all
items */
        margin: 0;
     }
    .nav .current{
        display: block; /* show only current 
 item */
    }
    .nav a{
        display: block;
        padding:5px 5px 5px 32px;
        text-align: left;
    }
    .nav .current a{
        background: none;
        color: #666;
    }
     
    /* on nav hover */
    .nav ul:hover{
        background-image: none;
   }
   .nav ul:hover li{
       display: block;
       margin: 0 0 5px;
   }
   .nav ul:hover .current{
       background: url(images/icon-check.png) no-repeat 10px 7px;
   }
    
   /* right nav */
   .nav .right ul{
       left: auto;
       right: 0;
   }
    
   /* center nav */
   .nav .center ul{
       left: 50%;
       margin-left: -90px;
   }
}

如何使用CSS来实现HTML5自适应导航栏，让我们先谈谈它。如果您想了解有关HTML的更多信息，可以来这里：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-366075-1.html