css响应式自适应导航条菜单效果代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：css响应式自适应导航条菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Saira:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *:not(ul) {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	box-sizing: border-box;
    }
    *:not(ul)::after, *:not(ul)::before {
    	box-sizing: border-box;
    }
    
    h1 {
    	font-size: 2.5rem;
    }
    
    h2 {
    	font-size: 2rem;
    }
    
    h3 {
    	font-size: 1.75rem;
    }
    
    h4 {
    	font-size: 1.5rem;
    }
    
    h5 {
    	font-size: 1.25rem;
    }
    
    h6 {
    	font-size: 1rem;
    }
    
    a {
    	text-decoration: none;
    	color: #464646;
    }
    
    ul {
    	margin: auto;
    	box-sizing: border-box;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-weight: 500;
    	font-family: inherit;
    	margin-bottom: 1rem;
    	line-height: 1.5;
    	color: inherit;
    }
    
    .btn-primary {
    	display: inline-block;
    	cursor: pointer;
    	color: #FFF;
    	padding: 0.5rem 1.5rem;
    	margin: 1rem auto;
    	text-decoration: none;
    	border-radius: 2px;
    	background: black;
    	text-align: center;
    	transition: all .5s ease-in-out;
    }
    .btn-primary:hover {
    	background: #3C3C3C;
    }
    
    .text-center {
    	text-align: center;
    }
    
    .text-white {
    	color: #FFF;
    }
    
    .site-title {
    	line-height: 0.75;
    	margin: 0;
    	font-size: 3.1rem;
    	text-transform: uppercase;
    	text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
    }
    @media (min-width: 576px) {
    	.site-title {
    		font-size: 4rem;
    	}
    }
    @media (min-width: 768px) {
    	.site-title {
    		font-size: 5rem;
    	}
    }
    
    .section-title {
    	color: #3C3C3C;
    }
    
    .header-background {
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: cover;
    }
    
    body {
    	font-size: 0.875rem;
    	letter-spacing: 0.02rem;
    	line-height: 1.5;
    	font-family: 'Saira', sans-serif;
    	background: #E6E6E6;
    	color: #0F0F0F;
    }
    @media (min-width: 576px) {
    	body {
    		font-size: 0.995rem;
    	}
    }
    @media (min-width: 768px) {
    	body {
    		font-size: 1rem;
    	}
    }
    
    /* Container settings */
    .grid-wrapper {
    	display: -ms-grid;
    	display: grid;
    	-ms-grid-columns: [full-start]
    		minmax(1rem, 1fr)
    		[medium-start]
    		minmax(1rem, 960px)
    		[medium-end]
    		minmax(1rem, 1fr)
    		[full-end];
    	grid-template-columns: [full-start]
    		minmax(1rem, 1fr)
    		[medium-start]
    		minmax(1rem, 960px)
    		[medium-end]
    		minmax(1rem, 1fr)
    		[full-end];
    	grid-gap: 1rem;
    	/* Long explanation: So basically this grid-wrapper makes 3 columns. The first column
         and the last column have a max size of 1fr, therefore they will behave as percentage based columns, auto adjusting themselves based on the width of the viewport. The middile column has a max size of 960px and is used to hold the main content. */
    	/* Gets all child elements of the grid-wrapper that have the class of .full-width-container and assigns them to the middle column. */
    	/* Gets all child elements that have the .full-width-container class.
         Quick note: While I want this container to be full width for backgrounds, I still
         want the inside to be only a max of 960px, therefore, I size the inside with the same grid as the inside element's granparent, there is probably a better way to do that I just couldn't figure it out. The reason I just didn't simply make any
         inside elments have a width of 960px is because I want the inside to respect the grid established by the grid-wrapper and doing it that way misaligns the way the medium-width-container and the full-width-container handle their contents when the window
         is rezized to smaller phone like proportions.
         */
    }
    .grid-wrapper > .medium-width-container {
    	-ms-grid-column: medium;
    	grid-column: medium;
    	width: 100%;
    	margin-top: 4rem;
    }
    .grid-wrapper > .full-width-container {
    	-ms-grid-column: full;
    	grid-column: full;
    	width: 100%;
    	display: -ms-grid;
    	display: grid;
    	-ms-grid-columns: inherit;
    	grid-template-columns: inherit;
    	-ms-grid-rows: minmax(min-content, max-content);
    	/* The minmax used here allows the navbar to preserve its auto height so to speak, otherwise the navbar would span about 50% or so height depending on the height placed on the header background. By setting a minmax containing the min-content and the max-content of each row, each row will only be as big or as minimun as its contents allows. I did it this way because I did not want to set a specific height amount for the header-background as when it is resized the height will never truly stay in proportion when it is set. */
    	grid-template-rows: minmax(-webkit-min-content, -webkit-max-content);
    	grid-template-rows: minmax(min-content, max-content);
    	/* The default for elements inside the .full-width-container class is to span the entire
              width of the container, but the .align-middle class allows elements to be placed within the
              middle container. */
    }
    .grid-wrapper > .full-width-container > * {
    	-ms-grid-column: full;
    	grid-column: full;
    }
    .grid-wrapper > .full-width-container > .align-middle {
    	-ms-grid-column: medium;
    	grid-column: medium;
    }
    
    /* Inner grid template */
    .inner-grid {
    	display: -ms-grid;
    	display: grid;
    	-ms-grid-columns: (1fr)[12];
    	grid-template-columns: repeat(12, 1fr);
    	grid-gap: 1rem;
    }
    .inner-grid .col-1,
    .inner-grid .col-2,
    .inner-grid .col-3,
    .inner-grid .col-4,
    .inner-grid .col-5,
    .inner-grid .col-6,
    .inner-grid .col-7,
    .inner-grid .col-8,
    .inner-grid .col-9,
    .inner-grid .col-10,
    .inner-grid .col-11,
    .inner-grid .col-12 {
    	-ms-grid-column: span 12;
    	grid-column: span 12;
    }
    @media (min-width: 576px) {
    	.inner-grid .col-12 {
    		-ms-grid-column: span 12;
    		grid-column: span 12;
    	}
    	.inner-grid .col-11 {
    		-ms-grid-column: span 11;
    		grid-column: span 11;
    	}
    	.inner-grid .col-10 {
    		-ms-grid-column: span 10;
    		grid-column: span 10;
    	}
    	.inner-grid .col-9 {
    		-ms-grid-column: span 9;
    		grid-column: span 9;
    	}
    	.inner-grid .col-8 {
    		-ms-grid-column: span 8;
    		grid-column: span 8;
    	}
    	.inner-grid .col-7 {
    		-ms-grid-column: span 7;
    		grid-column: span 7;
    	}
    	.inner-grid .col-6 {
    		-ms-grid-column: span 6;
    		grid-column: span 6;
    	}
    	.inner-grid .col-5 {
    		-ms-gr.........完整代码请登录后点击上方下载按钮下载查看