Flex menu

In this example below you will see how to do a Flex menu with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©
  • HTML
  • CSS
  • JavaScript
    <body class="site">
<div class="container">
  
			<nav>
        
				<ul>
          <a href="index.php">
            <div class="logo"></div>
          </a> 
					<a href="">
						<li>Affiliates
							<ul>
								<li>Account Changes</li>
								<li>Maintenance</li>
								<li>Pending</li>
							</ul>
						</li>
					</a>
					<a href="">
						<li>Advertisers</li>
					</a>
					<a href="">
						<li>Campaigns</li>
					</a>
					<a href="">
						<li>Creatives</li>
					</a>
					<a href="">
						<li>Reports</li>
					</a>
					<a href="">
						<li>Accounting</li>
					</a>
					<a href="">
						<li>Tools</li>
					</a>
					<a href="">
						<li>Communicate</li>
					</a>
					<a href="">
						<li>System</li>
					</a>
				</ul>
			</nav>
  </div>
  <br>
  <main class="content">
    
    <div class="container">
    Yo Yo YO!!!
    </div>
  </main>
  <footer>
    im a footer on the bottom
  </footer>
</body>

/*Downloaded from https://www.codeseek.co/mush_el/flex-menu-PzAkkE */
    html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }
.site {
	display: flex;
	min-height: 95vh;
	flex-direction: column;
}
br {
  margin: 10px;
}
.content {
	flex: 1;
}
.container {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px 0px 20px;
  box-sizing: border-box;
  background: #f9f9f9; 
}
.logo {
  width: 136px;
  height: 64px;
  border: 2px dashed #f0c;
  float: left;
  display: inline-block;
  margin: -5px 0px 0px -20px;
  box-sizing: border-box;
  line-height: 64px;
}
.logo:after {
  content: "Company Name";
}
a {
  color: #FF7D57 /*#1EAEDB*/; }
a:hover {
  color: #FFAF5A /*#0FA0CE*/; }

nav {
margin: -4px 0px 0px 0px;
}
ul {
  margin: 0px;
  padding: 0px;
}
nav > ul {
	display: flex;
  flex-flow: row wrap;
	margin: 0px 0px 0px 0px;
	width: 100%;
	list-style: none;
	border-bottom: 3px solid #B8CCBB;
	font-family: 'Lato', sans-serif;
	text-align: center;
	font-size: 1.2rem;
	justifiy-content: flex-end;
  box-sizing: border-box;
  /* This aligns items to the end line on main-axis */  
}
nav > ul > a > li {
	display: inline-block;
	vertical-align: top;
	padding: 15px 10px 5px 10px;
	text-align: center;
	margin-bottom: 0px;
}
nav > ul > a:nth-child(2) {
  margin-left: 10px; 
}
nav a {
	text-decoration: none;
}
nav a li ul {
	display: none;
	position: absolute;
	margin: 0px;
}
nav a:hover li {
	color:#62BA89;
}
nav a:hover li ul {
	display: block;
	border: 1px solid #B8CCBB;
	width: 10%;
	color: #62BA89;
	background: #fff;
	padding: 0px 4px;
	z-index: 1;
}
nav li li {
	display: block;
	text-align: left;
	font-size: 1.0rem;
	margin-bottom: 0px;
}

@media all and (max-width: 1040px) {
  nav > ul  {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: flex-start;
    margin: 0px 0px 0px 120px;
    box-sizing: border-box;
    border-bottom: 0px solid;
  }
  nav > ul > a:nth-child(2) {
  margin-left: 0px; 
}
  nav > ul .logo {
    border-color: green;
    position: absolute;
    left: 0px;
    margin: 0px 0px 0px 0px;
  }
  nav {
margin: -10px 130px 0px 0px;
}
  
   nav > ul > a > li {
    padding: 7px 20px 9px 20px;
    border-right: 1px solid #bbb;
     border-bottom: 1px solid #bbb;
     border-top: 1px solid #bbb;
  }
}

@media all and (max-width: 640px) {
  nav > ul{
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
    text-align:left;
    justify-content: flex-start;
    margin: -5px 0px 0px -8px;
    width: 136px;
    background: #efefef;
 
  }
   nav > ul .logo {
    border-color: #f0c;
    position: relative;
    left: 0px;
    margin: 0px 0px 0px -40px;
  }
  nav > ul > a > li {
    padding: 10px 20px 10px 20px;
    width: 100%;
    margin-left: -39px;
    text-align: left;
  }
}


/*Downloaded from https://www.codeseek.co/mush_el/flex-menu-PzAkkE */
    

Comments