flex for online menu

In this example below you will see how to do a flex for online 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
    <div class="wrapper">
  <div class="logo">&#161;El Libre!</div>
  <div class="phone">504 123-4567</div>
    <nav>
      <ul>
        <li>Home</li>
        <li>Menu</li>
        <li>Contact</li>
      </ul>
    </nav>

  <section>
    <h1>Starters</h1>
    <div class="item">
      <h2>This is a Menu item</h2>
      <ul>
        <li><strong>here</strong> is another thing</li>
        <li><strong>and some</strong> here is another thing</li>
        <li><strong>This one</strong> is way longer here is another thing here is another thing here is another thing</li>
        <li><strong>This one is</strong> way longer here is another thing here is another thing here is another thing</li>
        <li><strong>This</strong> one is way longer here is another thing here is another thing here is another thing</li>
        <li><strong>This one is way longer</strong> here is another thing here is another thing here is another thingThis one is way longer here is another thing here is another thing here is another thing</li>
      </ul>
    </div>
     <div class="item">
      <h2>This is a Menu item</h2>
      <ul>
        <li>here is another thing</li>
        <li>and some here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thingThis one is way longer here is another thing here is another thing here is another thing</li>
      </ul>
    </div>
  </section>
  <section>
    <h1>Entrees</h1>
    <div class="item">
      <h2>This is a Menu item</h2>
      <ul>
        <li>here is another thing</li>
        <li>and some here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thingThis one is way longer here is another thing here is another thing here is another thing</li>
      </ul>
    </div>
    
     <div class="item">
      <h2>This is a Menu item</h2>
      <ul>
        <li>here is another thing</li>
        <li>and some here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thingThis one is way longer here is another thing here is another thing here is another thing</li>
        <li>here is another thing</li>
        <li>and some here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thing</li>
        <li>This one is way longer here is another thing here is another thing here is another thingThis one is way longer here is another thing here is another thing here is another thing</li>
      </ul>
    </div>
  </section>
  <div class="footer">
  this is where the address is New Orleans, LA 70116
  </div>
</div>


/*Downloaded from https://www.codeseek.co/mush_el/flex-for-online-menu-MwVXGa */
    html, body {
  font-family: 'Bitter', serif;
  padding: 0px;
  margin: 0px;
}

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;   
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  background: url('https://graphics8.nytimes.com/newsgraphics/2015/01/08/places-to-go//assets/images/cuba-1600.jpg');
  background-size: cover;
}

.wrapper > * {
  padding: 0px;
  flex: 1 100%;
  box-sizing: border-box;
}

.logo {
  font-size: 50px;
  padding: 20px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: 2px 2px 2px #000;
}

.phone {
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: 2px 2px 2px #000;
  font-size: 25px;
  padding-bottom: 20px;
}
nav ul {
  list-style: none;
  display: block;
  background: rgba(193, 1, 30, 0.8);
  max-width: 1000px;
  padding: 7px 0px;
  color: #fff;
  margin: auto;
  text-align: center;
  border-radius: 3px 3px 0px 0px;
}

nav li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 20px;
  text-transform: uppercase;
}

section {
  max-width: 1000px;
  margin: auto;
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid #fff;
  box-shadow: -1px 3px 30px #211111;
}

section .item {
  width: 40%;
  vertical-align: top;
  margin: 0px auto;
  display: inline-block;
  padding: 0px 0% 0px 6.5%;
  color: #211111;
}
h1 {
  text-align: center;
  font-size: 30px;
  margin: 20px 0px 0px 0px;
  color: #211111;
}
.item h2 {
  border-bottom: 2px solid #211111;
}

.item ul {
  list-style: none;
  line-height: 22px;
  padding: 0px 10px 0px 20px;
}

.item li {
  padding: 5px 0px;
}
.footer {
  max-width: 1000px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: 2px 2px 2px #000;
  font-size: 20px;
  padding: 20px 0px;
  margin: auto;
}
@media all and (max-width: 660px) {
  nav {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
  section .item {
    width: 88%;
  }
}

@media all and (max-width: 500px) {
  nav ul li {
    padding: 0px 10px;
  }
}



/*Downloaded from https://www.codeseek.co/mush_el/flex-for-online-menu-MwVXGa */
    

Comments