您现在的位置是：网站首页> 编程资料编程资料

使用CSS3制作响应式导航菜单的方法浅谈CSS中display/float/position属性值的相互影响css(display,float,position)深入理解老生常谈css中float的用法CSS使用float属性设置浮动元素的实例教程使用CSS的overflow属性防止float撑开div的方法CSS基础知识之float详解理解CSS浮动float、定位positionCSS重要属性之float学习心得(分享)

2021-09-05 657人已围观

简介 这篇文章主要介绍了使用CSS3制作响应式导航菜单的方法,这种菜单在移动端的网页制作中也经常能够用到,需要的朋友可以参考下

关于使用响应式设计来创建一个手机导航栏，之前我曾经写过一个教程。现在我发现了一种新的方式，可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记，而且菜单可以居左、居中和居右对齐。不像前面一个教程中需要点击来展开，这个菜单可以在hover时展开，对用户更为友好。它也包含一个指示器来显示当前激活的菜单项。这种方式可以工作于所有的移动和桌面浏览器中，甚至包括IE。

演示

目标

　　这个教程的目标是向你展示如何把一个传统的列表菜单在更小的屏幕上转换为可伸展的菜单。
2015712171358394.jpg (364×251)

这种方式对于下图这种有很多链接的导航来说非常有用。你可以把所有的按钮转换为一个优雅的伸展条。
2015712171423589.jpg (558×218)

HTML代码

下面是导航的HTML代码。

  

　　CSS

　　导航的CSS样式（桌面视图）非常简单，所以我不打算介绍细节。请注意我为导航的

  • 元素指定了display:inline-block来取代float:left。这样我们可以通过为
      元素设定text-align属性来控制菜单按钮居左、居中或者居右对齐。

      CSS Code复制内容到剪贴板
      1. /* nav */  
      2. .nav {   
      3.     position: relative;   
      4.     margin: 20px 0;   
      5. }   
      6. .nav ul {   
      7.     margin: 0;   
      8.     padding: 0;   
      9. }   
      10. .nav li {   
      11.     margin: 0 5px 10px 0;   
      12.     padding: 0;   
      13.     list-style: none;   
      14.     display: inline-block;   
      15. }   
      16. .nav a {   
      17.     padding: 3px 12px;   
      18.     text-decoration: none;   
      19.     color: #999;   
      20.     line-height: 100%;   
      21. }   
      22. .nav a:hover {   
      23.     color: #000;   
      24. }   
      25. .nav .current a {   
      26.     background: #999;   
      27.     color: #fff;   
      28.     border-radius: 5px;   
      29. }  

      　　居中与居右对齐

      　　像上面所提到的一样，你可以使用text-align属性更改按钮的对其方式。

      CSS Code复制内容到剪贴板
      1. /* right nav */  
      2. .nav.rightright ul {   
      3.     text-align: rightright;   
      4. }   
      5.     
      6. /* center nav */  
      7. .nav.center ul {   
      8.     text-align: center;   
      9. }  

               IE支持

               IE8或更早的版本不支持HTML5的