Icon Menu CSS Berubah Dengan jQuery Toggle | Navicon Transformation

Icon Menu CSS Berubah Dengan jQuery Toggle | Navicon Transformation

CSS Menu Icon Transforms With jQuery Toggle | Navicon Transformation
Icon Menu CSS Berubah Dengan jQuery Toggle | Navicon Transformation

Bagaimana kita dapat membuat berbagai jenis transformasi ikon menu menggunakan CSS? - nah sobat ruangcoder, pada artikel kali Icon Menu CSS Berubah Dengan jQuery Toggle | Navicon Transformation ini admin akan membua tutorial atau cara merubah icon menu dengan CSS dan Jquery Toggle, apa yang dimaksud dengan perubahan icon, sobat ruangcoder bisa lihat thumbnail postingan ini, dimana di thumbnail itu ada icon yang terdiri dari humberger, x, +, >, <, nah pada icon itu lah contohnya, icon humberger kenapa admin sebut kaya gitu, ya emang mirip kaya humberger maksud dari perubahan icon nya itu gimana sih min? nah yang dimaksud perubahan nya itu adalah, icon yang utama yaitu icon humberger jadi default tampilan yang muncul icon humberger tapi saat sobat klik icon humberger tersebut maka icon akan berubah misal jadi icon X bukan lagi icon humberger nah jadi begitu, isitlahnya gini deh biar gak ribet, icon nya di umpetin di dalam icon humberger , sebelum di klik icon aslinya tidak akan muncul.

Dimana artikel kali ini yang akan admin bagikan tentang membuat Menu CSS Ikon Transform dengan menggunakan jQuery Toggle dan Menggunakan CSS, untuk fungsi perubahan atau transofrm nya didasarkan pada jQuery. Seperti yang kita ketahui jQuery adalah pustaka JS itu sebabnya admin menempatkan posting ini dalam Kategori JavaScript juga. Program ini mungkin membantu teman apalagi yang berbasis di Front End, ini tentu tutorialnya dapat diterapkan di situs web sobat.

Oke sobat tanpa banyak basa - basi , jika sobat tertarik langsung saja masuk ke tahap pembuatannya sobat.

Preview Program

Icon Menu CSS Berubah Dengan jQuery Toggle | Navicon Transformation

Sebelum admin menyertakan source code, mari kita bicarakan. Pertama admin telah membuat tata letak menggunakan sebuah tag <section> HTML dan juga tag <nav>
Admin telah membuat tag bagian sebagai element utama dan menempatkan yang lain didalamnya. Untuk setiap ikon, admin membuat dengan tag hyperlink dan meletakkan pada tag <div>
di dalamnya. Dan dalam file HTML, admin telah menautkan file lain seperti CSS, JS dan tautan CDN jQuery.

Dan untuk penggunaan CSS admin memberi gaya, ukuran, posisi, dll untuk elemen. Di sana admin telah banyak menggunakan CSS : sebelum dan : setelah perintah untuk membuat sebuah ikon.

Fungsi jQuery menangani fitur sakelar program ini, dan memiliki 2 baris kode. Di sana admin telah menggunakan . perintah klik ( fungsi ( ) ) untuk mendeteksi klik dan mengelola sakelar atau perpindahan icon. admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, Sobat harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS , dan ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan.

Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.


<!DOCTYPE html>
<!-- Code By RuangCoder ( https://www.ruangcoder.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Menuicon Transforms | RuangCoder.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<section>
  <nav>
    <a class="menuicon-button x">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button plus">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button leftarr">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button rightarr">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button upperarr">
      <div class="menuicon"></div>
    </a>    
  
  </nav>
  <h1>Click on the icons</h1>
    
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
@charset "UTF-8";
* {
  box-sizing: border-box;
}
html {
  font-size: 100%;
}
html, body, section {
  position: relative;
}
body {
  font-family: sans-serif;
  background: #f3f3f3;
  padding: 1.5rem 1.5rem 0;
  backface-visibility: hidden;
  margin-top: 15%;
}
section {
  max-width: 40rem;
  margin: 0 auto;
  border-radius: .5rem .5rem .5rem .5rem;
  background: #FFF;
  overflow: hidden;
}
section *, section *:before, section *:after {
  transform: translate3d(0, 0, 0);
}
nav {
  display: flex;
  justify-content: space-between;
  height: 4.5rem;
  background: #1c1d31;
  text-align: right;
  border-radius: .5rem .5rem 0 0;
  padding: 0 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
h1 {
  text-align: center;
  padding: 1.5rem;
  transition: 1s;
  pointer-events: none;
  text-transform: uppercase;
}
#carbonads {
  display: block;
  overflow: hidden;
  max-width: 180px;
  font-size: 14px;
  margin: 0 2em;
  background: rgba(39, 67, 128, 0.1);
  padding: .5em;
  border-radius: 1rem;
}
#carbonads:hover {
  color: dodgerblue;
}
#carbonads a {
  color: inherit;
  text-decoration: none;
}
.carbon-img img {
  display: block;
  margin: 1rem auto;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 5px;
}
.carbon-text {
  display: block;
  padding: 0 1rem;
}
.carbon-poweredby {
  display: block;
  padding: 1rem 1rem .5rem;
  font-size: smaller;
  opacity: .5;
}
.menuicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: 0.25s;
  cursor: pointer;
  user-select: none;
  opacity: .8;
}
.menuicon-button .menuicon:before, .menuicon-button .menuicon:after {
  transition: 0.25s;
}
.menuicon-button:hover {
  transition: 0.5s;
  opacity: 1;
}
.menuicon-button:hover .menuicon:before, .menuicon-button:hover .menuicon:after {
  transition: 0.25s;
}
.menuicon-button:hover .menuicon:before {
  top: .825rem;
}
.menuicon-button:hover .menuicon:after {
  top: -.825rem;
}
.menuicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: #FFF;
  transition: 0.5s;
  border-radius: 2.5rem;
}
.menuicon:before, .menuicon:after {
  display: block;
  content: "";
  height: .3125rem;
  width: 2.5rem;
  background: #FFF;
  position: absolute;
  z-index: -1;
  transition: 0.5s 0.25s;
  border-radius: 1rem;
}
.menuicon:before {
  top: .625rem;
}
.menuicon:after {
  top: -.625rem;
}
.open:not(.steps) .menuicon:before,
.open:not(.steps) .menuicon:after {
  top: 0 !important;
}
.open .menuicon:before,
.open .menuicon:after {
  transition: 0.5s;
}
.open {
  transform: scale(0.75);
}
.open.leftarr .menuicon:before, .open.leftarr .menuicon:after,
.open.rightarr .menuicon:before,
.open.rightarr .menuicon:after,
.open.upperarr .menuicon:before,
.open.upperarr .menuicon:after {
  width: 1.5rem;
}
.open.leftarr .menuicon:before,
.open.rightarr .menuicon:before,
.open.upperarr .menuicon:before {
  transform: rotate(35deg);
  transform-origin: left top;
}
.open.leftarr .menuicon:after,
.open.rightarr .menuicon:after,
.open.upperarr .menuicon:after {
  transform: rotate(-35deg);
  transform-origin: left bottom;
}
.open.upperarr {
  transform: scale(0.75) rotate(90deg);
}
.open.rightarr .menuicon:before {
  transform: translate3d(1em, 0, 0) rotate(-35deg);
  transform-origin: right top;
}
.open.rightarr .menuicon:after {
  transform: translate3d(1em, 0, 0) rotate(35deg);
  transform-origin: right bottom;
}
.open.plus .menuicon,
.open.x .menuicon {
  background: transparent;
}
.open.plus .menuicon:before,
.open.x .menuicon:before {
  transform: rotate(-45deg);
}
.open.plus .menuicon:after,
.open.x .menuicon:after {
  transform: rotate(45deg);
}
.open.plus {
  transform: scale(0.75) rotate(45deg);
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com )
$("a").click(function(){
  $(this).toggleClass("open");
});

Sekarang Sobat telah berhasil membuat Transformasi Ikon Menu CSS Dengan jQuery Toggle , Program Transformasi Navicon . Jika Sobat memiliki keraguan atau komentar di bawah. Terima kasih telah mengunjungi, dan jangan lupa terus berkunjung.

Anda mungkin menyukai postingan ini