全屏导航菜单

转自: https://designmodo.com/checkout-form/
By clicking on the button(s), you agree with Terms of Use, Privacy Policy
Raul Dronca • CSS3, HTML, jQuery • November 4, 2016 • 0 Comments

在本教程中，我们将创建一个全屏的导航菜单使用HTML、CSS3和一点点的jQuery。在本教程中，我们将使用谷歌的字体.
HTML
像往常一样，第一步是创建HTML结构。这是我们需要的：
导航栏，我们将把一个标志在左边，和两个按钮的权利，一个登录按钮和菜单按钮将激活全屏覆盖一个当用户点击它。
全屏幕覆盖的菜单，在那里我们会有一个关闭按钮和菜单

这里是标记：

<div class="navbar">
  <img class="logo" src="images/logo.png" alt="Foss Logo"/>
 
  <div class="navbar-buttons">
    <button class="button" type="button" name="button">SIGN IN</button>
    <span><img class="open-menu" src="images/menu.svg" alt=""/></span>
  </div>
</div>
 
<!-- Overlay Navigation Menu -->
<div class="overlay">
  <h2 class="nav-title">Navigation</h2>
  <nav class="overlay-menu">
    <ul>
      <li><a href="#">Our Store</a></li>
      <li><a href="#">Catalog</a></li>
      <li><a href="#">Delivery</a></li>
      <li><a href="#">Contact</a></li>
      <li><img class="close-menu" src="images/close.svg" alt=""/></li>
    </ul>
  </nav>
</div>

Great! Now that we’ve set up our html strcture, let’s go to the next stept and make it look awesome!

We’re almost done. The last thing we need to style is the .panel-footer. Here we have two buttons, a .back-btn and a .next-btn; align them properly using flexbox.

.panel-footer {
  display: flex;
  width: 100%;
  height: 96px;
  padding: 0 80px;
  background-color: rgb(239, 239, 239);
  justify-content: space-between;
  align-items: center;
}

Give them different colors and animate them a little bit, so there’s a hover action that scales a little using transform and transition.

.btn {
  font-size: 16px;
  width: 163px;
  height: 48px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  letter-spacing: 1px;
  border: none;
  border-radius: 23px;
}

.back-btn {
  color: #f62f5e;
  background: #fff;
}
 
.next-btn {
  color: #fff;
  background: #f62f5e;
}
 
.btn:focus {
  outline: none;
}
 
.btn:hover {
  transform: scale(1.1);
}

One last thing: Notice that when you click on the payment method it only checks the radio button? For more finesse, change the border color of the box when it’s checked. Do this using jQuery.

First, make sure you include jQuery and then add a class named blue-border.

.blue-border {
  border: 1px solid rgb(110, 178, 251);
}

Cool! Now in JavaScript file, add the following lines of code:

$(document).ready(function() {
 
  $('.method').on('click', function() {
    $('.method').removeClass('blue-border');
    $(this).addClass('blue-border');
  });
 
})

Let’s also validate the input fields. If you click the next button and one of the inputs is empty, the border should be red, so add a css file with the class .warning:

.warning {
  border-color: #f62f5e;
}

And the JS validation in our JS file:

var $cardInput = $('.input-fields input');
 
$('.next-btn').on('click', function(e) {
 
  $cardInput.removeClass('warning');
 
  $cardInput.each(function() {    
     var $this = $(this);
     if (!$this.val()) {
       $this.addClass('warning');
     }
  })
});

Awesome! The tutorial is done! Take a look at the demo and let me know what you think.