Html css3如何制作创建响应式导航条简洁大方导航条设计网页前端设计id1092

zwxic

已于 2022-05-18 18:22:52 修改

阅读量1k

点赞数

分类专栏：网站前端前端设计文章标签： css html css3 js

于 2020-09-22 08:01:54 首次发布

本文链接：https://blog.csdn.net/zwxic/article/details/108723176

版权

Html css3如何制作创建响应式导航条简洁大方导航条设计网页前端设计id1092
在这里插入图片描述
源码下载地址
 在线效果演示
html css混写

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Responsive Mega menu</title>
 	   <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 	
 	<link rel="stylesheet" href="bootsnav.css"> 	
 	
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <script src="bootsnav.js"></script>
 <style>
     body{
       
    font-family: 'Roboto Condensed', sans-serif;
    
}

     body{
   
         background-image: url(amd.jpg);
         background-size: cover;
          background-repeat: no-repeat;
         height: 100vh;
     }   
nav.navbar.bootsnav{
   
    border: none;
    background: none;
    margin-bottom: 150px;
    margin-top: 40px;
    margin-left: 20px;
}
nav.navbar.bootsnav ul.nav > li{
    margin-right: 20px; }
nav.navbar.bootsnav ul.nav > li > a{
   
    padding: 10px 15px;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    transition: all 0.5s ease 0s;
}
nav.navbar.bootsnav ul.nav > li.dropdown > a{
    padding: 10px 30px 10px 15px; }
nav.navbar.bootsnav ul.nav > li.active > a,
nav.navbar.bootsnav ul.nav > li.active > a:hover,
nav.navbar.bootsnav ul.nav > li > a:hover,
nav.navbar.bootsnav ul.nav > li.on > a{
   
  color: #b71540;
}
nav.navbar.bootsnav ul.nav > li > a > span:before,
nav.navbar.bootsnav ul.nav > li > a > span:after{
   
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    transition: all 0.4s ease 0s;
}
nav.navbar.bootsnav ul.nav > li > a > span:after{
   
    width: 50px;
    background-color: #b71540;
}
nav.navbar.bootsnav ul.nav > li:hover > a > span:before,
nav.navbar.bootsnav ul.nav > li.active > a > span:before{
   
  transform: translateX(-50%) translateY(-50%) rotate(0);
  opacity: 1;
}
nav.navbar.bootsnav ul.nav > li:hover > a > span:after,
nav.navbar.bootsnav ul.nav > li.active > a > span:after{
   
  transform: translateX(-50%) translateY(-50%) rotate(0);
  opacity: 1;
  width: 0;
}
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
   
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0 0 0 7px;
}
nav.navbar.bootsnav ul.nav > li.dropdown > ul{
   
    top: 100%;
    transition: all 0.8s ease 0s;
}
nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{
    top: 140%; }
.dropdown-menu.multi-dropdown{
   
    position: absolute;
    left: -100% !important;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
   
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 10px;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li{
    font-size: 14px; }
nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{
   
    font-size: 16px;
    font-weight: bold;
    color:#b71540 ;
}
@media only screen and (max-width: 990px){