-->
gudangupdate.com
profile

Gudang Update

Home  ›  Blogging  ›  Tutorials
Daily UI: Make A Good Navigation Menu For User Interface

Daily UI: Make A Good Navigation Menu For User Interface

Date: October 22, 2019
Daily UI: Make A Good Navigation Menu For User Interface

What Is The User Interface?

The user interface is a method of the program as well as the user speaking. The term user interface or interface is sometimes used as a substitute for the HCI (Human-Computer Interaction) designation. HCI (Human-Computer Interface) is all aspects of user and computer interaction, not just hardware. Everything that appears on the screen, read in the documentation, and manipulated with a keyboard (or mouse) is part of the user interface.

The User Interface acts as a liaison or translator of data between the user and the surgical system, so the computer can be used. The user interface can also be referred to as an interrelation mechanism or the total integration of hard and soft features that shape the computer experience. Use the interface from the application side can be in the form of Graphical User Interface (GUI) or Command Line Interface (CLI), on the contrary in terms of hardware bias in the form of Apple Desktop Bus (ADB), USB, and firewire.

Therefore, in this tutorial, we will discuss or try to make a pretty good mitigation menu for you.

Then how to make it?

For how to make it quite easy, you just need to listen and watch step by step and make sure nothing is missed.

Okay, for the first step that is, we make the Css first. The Css code can be seen below: 


html {
  background: #f3f3f3;
  font-family: 'Roboto', sans-serif;
  min-height: 100%;
}
html:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/230827/background-full.png) no-repeat;
  background-size: cover;
  z-index: 1;
}
html:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background: #339af0;
  z-index: 1;
}

button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  outline: none;
}

.mobile-wrapper {
  width: 300px;
  margin-bottom: 50px;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 25px;
}
.mobile-wrapper .mobile {
  width: 100%;
  padding-bottom: 216%;
  background: black;
  border-radius: 25px;
}
.mobile-wrapper .mobile .photo {
  border-radius: 0 0 15px 15px;
  background: black;
  width: 40%;
  height: 6%;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}
.mobile-wrapper .mobile .photo:after {
  content: '';
  width: 40%;
  padding-bottom: 5%;
  border-radius: 20px;
  background: #191919;
  border: 2px solid #191919;
  display: block;
}
.mobile-wrapper .mobile .photo:before {
  content: '';
  width: 8%;
  padding-bottom: 8%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid #212121;
  display: block;
  margin-left: 10px;
}
.mobile-wrapper .mobile .screen {
  border-radius: 20px;
  width: 94%;
  height: 97%;
  background: white;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
}
.mobile-wrapper .mobile .screen .os-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 999;
  background: #339af0;
}
.mobile-wrapper .mobile .screen .os-header .notch-left,
.mobile-wrapper .mobile .screen .os-header .notch-right {
  color: white;
  padding: 10px;
  display: flex;
  align-items: center;
}
.mobile-wrapper .mobile .screen .os-header .notch-left > *,
.mobile-wrapper .mobile .screen .os-header .notch-right > * {
  font-size: 12px;
  padding: 0 4px;
}
.mobile-wrapper .mobile .screen .header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 6;
  transition: all ease 500ms;
}
.mobile-wrapper .mobile .screen .header .navbar {
  padding-top: calc(34px + 15px );
  display: flex;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/230827/background.png");
  background-position: center center;
  background-size: cover;
  background-color: #339af0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  justify-content: space-between;
  align-items: center;
}
.mobile-wrapper .mobile .screen .header .navbar .nav-toggle {
  width: 25px;
  height: 20px;
  position: relative;
}
.mobile-wrapper .mobile .screen .header .navbar .nav-toggle span {
  display: block;
  height: 3px;
  background: white;
  position: absolute;
  border-radius: 5px;
  transition: all ease 250ms;
}
.mobile-wrapper .mobile .screen .header .navbar .nav-toggle span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
}
.mobile-wrapper .mobile .screen .header .navbar .nav-toggle span:nth-child(2) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 75%;
}
.mobile-wrapper .mobile .screen .header .navbar .nav-toggle span:nth-child(3) {
  bottom: 0;
  left: 0;
  width: 100%;
}
.mobile-wrapper .mobile .screen .header .navbar .logo {
  color: white;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.mobile-wrapper .mobile .screen .header .navbar .user img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
}
.mobile-wrapper .mobile .screen .aside {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  background: #339af0;
  z-index: 5;
  overflow: auto;
  width: 100%;
  transform: translateX(-100%);
  transition: all ease 500ms;
}
.mobile-wrapper .mobile .screen .aside ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 95px;
}
.mobile-wrapper .mobile .screen .aside ul li {
  cursor: pointer;
  padding: 20px 20px;
  color: white;
  display: flex;
  align-items: center;
  font-weight: 100;
  position: relative;
}
.mobile-wrapper .mobile .screen .aside ul li i {
  font-size: 30px;
  margin-right: 25px;
}
.mobile-wrapper .mobile .screen .content {
  padding: 0 10px;
  padding-top: 98px;
  padding-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  position: relative;
  flex: 1;
  width: 100%;
}
.mobile-wrapper .mobile .screen .content > span {
  display: block;
  background-color: #d2d2d2;
  margin: 10px 0;
  border-radius: 10px;
}
.mobile-wrapper .mobile .screen .content > span.block-title {
  width: 100%;
  height: 20px;
}
.mobile-wrapper .mobile .screen .content > span.block-text {
  width: 100%;
  height: 150px;
}
.mobile-wrapper .mobile .screen .content > span.block-text.semi {
  width: calc(50% - 10px);
  margin: 5px;
}
.mobile-wrapper .mobile .screen .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: white;
  box-shadow: 0 0 5px rgba(48, 29, 32, 0.2);
  z-index: 5;
}
.mobile-wrapper .mobile .screen .footer ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.mobile-wrapper .mobile .screen .footer ul li {
  width: 100%;
}
.mobile-wrapper .mobile .screen .footer ul li button {
  width: 100%;
  background: transparent;
  padding: 20px 0;
  border: none;
  font-size: 0px;
  outline: none;
  position: relative;
}
.mobile-wrapper .mobile .screen .footer ul li button.active i {
  color: #575757;
  font-weight: bold;
}
.mobile-wrapper .mobile .screen .footer ul li button.notification i {
  color: #339af0;
  font-weight: bold;
}
.mobile-wrapper .mobile .screen .footer ul li button.notification:before {
  content: attr(data-notification);
  font-size: 10px;
  position: absolute;
  top: 20%;
  right: 20%;
  display: block;
  color: #339af0;
  font-weight: bold;
  width: 15px;
  text-align: left;
}
.mobile-wrapper .mobile .screen .footer ul li button i {
  color: #d2d2d2;
  font-size: 20px;
}

body.open .mobile-wrapper .mobile .screen .header .navbar .nav-toggle span:nth-child(1) {
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: bottom left;
  width: 50%;
  top: 50%;
}
body.open .mobile-wrapper .mobile .screen .header .navbar .nav-toggle span:nth-child(3) {
  transform: translateY(50%) rotate(45deg);
  transform-origin: top left;
  width: 50%;
  bottom: 50%;
}
body.open .mobile-wrapper .mobile .screen .aside {
  transform: translateX(0%);
}
body.open .mobile-wrapper .mobile .screen .aside ul li {
  animation: fadeInLeft ease 500ms;
  animation-fill-mode: forwards;
  opacity: 0;
}
body.open .mobile-wrapper .mobile .screen .aside ul li:nth-child(1) {
  animation-delay: 0.1s;
}
body.open .mobile-wrapper .mobile .screen .aside ul li:nth-child(2) {
  animation-delay: 0.2s;
}
body.open .mobile-wrapper .mobile .screen .aside ul li:nth-child(3) {
  animation-delay: 0.3s;
}
body.open .mobile-wrapper .mobile .screen .aside ul li:nth-child(4) {
  animation-delay: 0.4s;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
Copy and paste all the Css code above. The next step is, we create the Javascript. You can see the following code: 


// Function for scrolling header

function scrollHeader(){
  var header = document.getElementById('header'),
      headerHeight = header.offsetHeight, // Header height
      content = document.getElementById('content'),
      previousScroll = content.scrollTop; // Get onload Scrolling

  content.onscroll = function(){
    currentScroll= content.scrollTop;  // Get the current scrolling position

    // Hide the header only if the header height is scroll
    if ( currentScroll > headerHeight){ 
      if ( currentScroll > previousScroll){
        header.style.transform = 'translateY(-'+ headerHeight +'px)'; // Hide header
      } else {
        header.style.transform = 'translateY(0)'; // Show header
      }
    }
    previousScroll = currentScroll;
  };
}scrollHeader(); //init function


// Function to toggle the menu 

function toggleMenu(){
  var navToggle = document.getElementById('nav-toggle');

  navToggle.onclick = function(){
    document.body.classList.toggle("open");
  };
} toggleMenu(); // init function

// Function for real clock

function updateClock() {
  var now = new Date(), // current date
      time = now.getHours() + ':' + now.getMinutes(),
      target = document.getElementById('time');

  // set the content of the element with the ID time to the formatted string
  target.innerHTML = [time];

  // call this function again in 1000ms
  setTimeout(updateClock, 1000);
} updateClock(); // init function
If it is already! Please copy and paste the code again. Well, for the last step, which is the manufacture of html. Copy and paste the following code: 


<div class="mobile-wrapper">
  <div class="mobile">
    <div class="photo"></div>
    <div class="screen">
      <div id="os-header" class="os-header">
        <div class="notch-left">
          <i class="fad fa-signal-4"></i>
          <i class="fad fa-flask-potion"></i>
        </div>

        <div class="notch-right">
          <i class="far fa-battery-half"></i>
          <span id="time" class="hour"></span>
        </div>
      </div>
      <div id="header" class="header">
        <div class="navbar">
          <button type="button" id="nav-toggle" class="nav-toggle">
            <span></span>
            <span></span>
            <span></span>
          </button>

          <div class="logo">
            Logo
          </div>

          <button class="user" type="button">
            <img src="https://randomuser.me/api/portraits/women/21.jpg"/>
          </button>
      </div>
    </div>
      
      <div id="aside" class="aside">
          <ul>
            <li><i class="fad fa-jack-o-lantern"></i>Spooky Link</li>
            <li><i class="fad fa-alicorn"></i> Magical Link</li>
            <li><i class="fad fa-rocket"></i> Space Link</li>
            <li><i class="fad fa-user-headset"></i> Need some Help ?</li>
        </ul>
      </div>

    <div id="content" class="content">
      <span class="block-title"></span>
      <span class="block-text"></span>
     
      <span class="block-text semi"></span>
      <span class="block-text semi"></span>
      <span class="block-text"></span>
      
      <span class="block-title"></span>
      <span class="block-text"></span>
      <span class="block-text"></span>
      
      <span class="block-title"></span>
      <span class="block-text"></span>
     
      <span class="block-text semi"></span>
      <span class="block-text semi"></span>
      <span class="block-text"></span>
      
      <span class="block-title"></span>
      <span class="block-text"></span>
      <span class="block-text"></span>
      
      
    </div>

    <div class="footer">
      <ul>
        <li>
          <button class="active" type="button"><i class="far fa-home-lg-alt"></i>Home</button>
        </li>
        <li>
          <button type="button"><i class="far fa-search"></i>Search</button>
        </li>
        <li>
          <button class="notification" data-notification="15" type="button"><i class="far fa-bell"></i>Notification</button>
        </li>
        <li>
          <button type="button"><i class="far fa-comment"></i>Messages</button>
        </li>
      </ul>
    </div>

  </div>
</div>
</div>
If you have done all the steps and code correctly, now is the time to see how it works. And for the results of all the code above, we attach the following demo.

Live Demo

That's all for today's discussion, hopefully it will be useful.
Load comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

CLOSE ADS
CLOSE ADS