Item: Menu Lab
Rating: 3.4
Author: blindingstars

1 Downloads
16 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

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

<head>
  <meta charset="UTF-8">
  <title>Menu Lab</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="buttons">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</section>

<section class="horizontal">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</section>

<section class="vertical">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</section>

<section class="icons">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</section>

<section class="freeform">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</section>
  
  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/blindingstars/menu-lab-QwpXeR */
@import url(https://fonts.googleapis.com/css?family=Fredoka+One|IM+Fell+English|Montserrat|Sanchez|Rock+Salt);

* {
  box-sizing: border-box;
}

section {
  padding: 100px 0;
  width: 100%;
  text-align: center;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;  
  transition: all 0.2s ease-in-out;
}

/* Horizontal Menu */
.horizontal {
  background: url(http://stephy.mccdgm.net/images/patterns/green_cup.png) rgb(166, 172, 150);
  font-family: 'IM Fell English', serif;
}

.horizontal li {
    display: inline;
    padding: 20px;
}

.horizontal a {
    display: inline-block;
    color: rgb(70, 56, 38);
    padding: 9px 19px 7px;
    border: 1px solid transparent;
    border-radius: 50px;
}
.horizontal a:hover {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: rgba(53, 38, 11, 0.14);
    box-shadow: inset 3px 3px 6px;
}

/* Vertical Menu */

.vertical {
  background: url(http://stephy.mccdgm.net/images/patterns/black_lozenge.png) rgb(26, 26, 26);
}

.vertical ul {
  display: block;
  margin: 0 auto;
  width: 300px;
  background: rgba(0,0,0,0.75);
  border: 5px solid rgba(255,255,255,0.75);
  box-shadow: 0 0 25px 3px #000;
}

.vertical li {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font: 1.25rem 'Montserrat', sans-serif;
}

.vertical li:hover {
  background-image: linear-gradient(180deg, hsl(0,0%,78%) 0%, 
                                            hsl(0,0%,90%) 47%,
                                            hsl(0,0%,78%) 53%,
                                            hsl(0,0%,70%)100%);
  
  box-shadow: inset 0px 0px 8px #000;
}

.vertical li:hover a {
  color: #000;
  text-shadow: 1px 1px #fff;
  letter-spacing: 0.15em;
}

.vertical a {
  color: rgba(255,255,255,0.25);
  display: block;
  padding: 20px;
  letter-spacing: 0;
  transition: letter-spacing 0.4s ease-in-out;
}

/* Button Menu */

.buttons {
  background: url(http://stephy.mccdgm.net/images/patterns/congruent_pentagon.png) rgb(190, 248, 207);
}

.buttons li {
  display: inline-block;
}

.buttons a {
  display: inline-block;
  color: #FFF;
  background: #64E0BA;
  padding: 10px 18px;
  margin: 15px 10px;
  font-family: 'Fredoka One', sans-serif;
  border-radius: 20px;
  box-shadow: 0 8px 0 0 #4AA185;
  text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease-in-out,
              top 0.3s ease-in-out,
              box-shadow 0.1s ease-in-out;
  
}

.buttons a:hover {
  background: rgb(161, 229, 108);
  box-shadow: 0 8px 0 0 #60A14A;
}

.buttons a:active {
  position: relative;
  top: 4px;
  background: #67D385;
  box-shadow: 0 8px 0 0 #4AA16F, 0 10px 5px 1px rgba(0,0,0,0.75);
}

/* Icon Menu */

.icons {
  background: url(http://stephy.mccdgm.net/images/patterns/geometry.png) #FAFAFA;
}

.icons ul {
  margin: 0 auto;
  display: block;
  width: 300px;
  background: #FAFAFA;
  box-shadow: 0 0 50px #FAFAFA;
}

.icons li {
  text-align: left;
  padding: 10px 0;
}

.icons a {
  font: bold 2rem Sanchez, serif;
  padding: 10px;
  display: inline-block;
  color: #222;
}

.icons a:before {
  content: '';
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  display: inline-block;  
  margin: -1.25rem 1rem;
  transition: box-shadow 0.2s ease-in-out,
              -webkit-transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
  transition: transform 1.2s ease-in-out,
              box-shadow 0.2s ease-in-out,
              -webkit-transform 1.2s ease-in-out;
}

.icons li:nth-of-type(1) a:before {
  background: url(http://stephy.mccdgm.net/images/labs/icons/home.png)
    no-repeat
    center center
    #B439C8;
}

.icons li:nth-of-type(1):hover a {
  color: #B439C8;
}

.icons li:nth-of-type(2) a:before {
  background: url(http://stephy.mccdgm.net/images/labs/icons/about.png)
    no-repeat
    center center
    #F5405B;
}

.icons li:nth-of-type(2):hover a {
  color: #F5405B;
}

.icons li:nth-of-type(3) a:before {
  background: url(http://stephy.mccdgm.net/images/labs/icons/portfolio.png)
    no-repeat
    center center
    #fb3;
}

.icons li:nth-of-type(3):hover a {
  color: #fb3;
}

.icons li:nth-of-type(4) a:before {
  background: url(http://stephy.mccdgm.net/images/labs/icons/pricing.png)
    no-repeat
    center center
    #A6DA65;
}

.icons li:nth-of-type(4):hover a {
  color: #A6DA65;
}

.icons li:nth-of-type(5) a:before {
  background: url(http://stephy.mccdgm.net/images/labs/icons/contact.png)
    no-repeat
    center center
    #14cedb;
}

.icons li:nth-of-type(5):hover a {
  color: #14cedb;
}

.icons li:hover a:before {
  box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.25),
              inset -1px -1px 5px 2px rgba(0,0,0,0.25);
  -webkit-transform: rotateZ(360deg);
          transform: rotateZ(360deg);
}

/* Freeform Menu */

.freeform {
  background: url(http://stephy.mccdgm.net/images/patterns/old_map.png) #F7EAC9;
  text-align: left;
}

.freeform li {
  display: block;
  padding: 0px;
  background: yellow;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.freeform a {
  font: 1.5rem/1.75rem 'Rock Salt', cursive;
  display: block;
  overflow: hidden;
  background: #FAF3E3;
  color: #2b2b2b;
  width: 290px;
  height: 3.35rem;
  padding: 10px 20px 20px;
  border-width: 1px 4px;
  border-style: solid;
  border-color: #2b2b2b;
  transition: all 0.6s ease-in-out;
}

.freeform li:first-of-type a {
  border-width: 4px 4px 1px;
}

.freeform li:last-of-type a {
  border-width: 1px 4px 4px;
}

.freeform a:hover {
  height: 250px;
}

.freeform a:after {
  content: '';
  width: 100%;
  height: 172px;
  margin: 15px 0 20px;
  border-radius: 3px;
  display: block;
}

.freeform li:nth-of-type(1) a:after {
  background: url(http://stephy.mccdgm.net/images/labs/icons/freeform-home.jpg);
}

.freeform li:nth-of-type(2) a:after {
  background: url(http://stephy.mccdgm.net/images/labs/icons/freeform-about.jpg);
}

.freeform li:nth-of-type(3) a:after {
  background: url(http://stephy.mccdgm.net/images/labs/icons/freeform-portfolio.jpg);
}

.freeform li:nth-of-type(4) a:after {
  background: url(http://stephy.mccdgm.net/images/labs/icons/freeform-pricing.jpg);
}

.freeform li:nth-of-type(5) a:after {
  background: url(http://stephy.mccdgm.net/images/labs/icons/freeform-contact.jpg);
}


/*Downloaded from https://www.codeseek.co/blindingstars/menu-lab-QwpXeR */
// Patterns by SubtlePatterns
// Images in the freeform menu from https://unsplash.com/

Comments

More from blindingstars

Menu Lab

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

Example for a simple menu lab for WEB175 Website Development. At this point in the class, we are comfortable with straight-CSS basics and are looking into ways to incorporate style.

Technologies

Comments

More from blindingstars

A Pen by Stephy

A Pen by Stephy

A Pen by Stephy

A Pen by Stephy

You Might Also Like

404 No signal

Nexus

Simon Game

A Pen by Selby Winkler

CSS3 spin preloader + preload Page

Simon Game

A Pen by hnsylitao

Provider Logos/Colors

Menu Lab

In this example below you will see how to do a Menu Lab with some HTML / CSS and JavascriptExample for a simple menu lab for WEB175 Website Development. At this point in the class, we are comfortable with straight-CSS basics and are looking into ways to incorporate style.

Technologies

Comments

More from blindingstars

A Pen by Stephy

A Pen by Stephy

A Pen by Stephy

A Pen by Stephy

You Might Also Like

404 No signal

Nexus

Simon Game

A Pen by Selby Winkler

CSS3 spin preloader + preload Page

Simon Game

A Pen by hnsylitao

Provider Logos/Colors

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

Example for a simple menu lab for WEB175 Website Development. At this point in the class, we are comfortable with straight-CSS basics and are looking into ways to incorporate style.