如何使用html和css创建响应式导航？

-2

我想创建一个响应式导航，它应该为桌面组合水平导航。对于表格，它应该以块形式显示。对于移动设备，当我悬停时，应该只有菜单链接，它应该显示整个菜单。如何使用html和css创建响应式导航？

<div class = "wrapper"> 
    <nav class = "menu"> 
     <ul class="sub-menu"> 
      <li class= "li2"><a href="#">In Cinemas Now</a></li> 
      <li class = "li2"><a href="#">Coming Soon</a></li> 
      <li class = "li2"><a href="#">On DVD/Blu-ray</a></li> 
      <li class= "li2"><a href="#">Showtimes &amp; Tickets</a></li> 
     </ul> 
    </nav> 
    <div class = "navMob"> 
     <a href ="#"> menu </a> 
    </div>

来源

2015-12-03 Ayush Mishra

下面是用HTML和CSS

HTML

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>CSS Only Navigation Menu</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <a href="#">About ￬</a> 
      <ul class="hidden"> 
       <li><a href="#">Who We Are</a></li> 
       <li><a href="#">What We Do</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Portfolio ￬</a> 
      <ul class="hidden"> 
       <li><a href="#">Photography</a></li> 
       <li><a href="#">Web & User Interface Design</a></li> 
       <li><a href="#">Illustration</a></li> 
      </ul> 
     </li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </body> 
    </html>

CSS

/*Strip the ul of padding and list styling*/ 
    ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    position: absolute; 
    } 

    /*Create a horizontal list with spacing*/ 
    li { 
    display:inline-block; 
    float: left; 
    margin-right: 1px; 
    } 
    /*Style for menu links*/ 
    li a { 
    display:block; 
    min-width:140px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #fff; 
    background: #2f3036; 
    text-decoration: none; 
    } 

    /*Hover state for top level links*/ 
    li:hover a { 
    background: #19c589; 
    } 

    /*Style for dropdown links*/ 
    li:hover ul a { 
    background: #f3f3f3; 
    color: #2f3036; 
    height: 40px; 
    line-height: 40px; 
    } 

    /*Hover state for dropdown links*/ 
    li:hover ul a:hover { 
    background: #19c589; 
    color: #fff; 
    } 
    /*Hide dropdown links until they are needed*/ 
    li ul { 
    display: none; 
    } 

    /*Make dropdown links vertical*/ 
    li ul li { 
    display: block; 
    float: none; 
    } 

    /*Prevent text wrapping*/ 
    li ul li a { 
    width: auto; 
    min-width: 100px; 
    padding: 0 20px; 
    } 

    /*Display the dropdown on hover*/ 
    ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
    }

响应导航代码

来源

2015-12-03 15:31:27 RAP

如何使用html和css创建响应式导航？

回答

相关问题