Responsive Off-Canvas Navigation Menu with jQuery CSS – Pushy

responsive off-canvas navigation menu with jquery css

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.

Features: Uses CSS transforms & transitions, Smooth performance on mobile devices, jQuery animation fallback for IE 7-9, Menu closes when a link is selected, Menu closes when the site overlay is selected, Auto-collapsible submenus, Left or right menu position, It’s responsive!

Read More Download Demo

Cara Membuat Galeri Foto Dengan HTML5 dan CSS3

Jika anda sedang atau akan membangun web atau cuma template yang kontennya cuma foto dengan sedikit penjelasan maka anda wajib membuat web yang memiliki galeri yang biasanya dalam galeri tersebut terdapat banyak foto atau gambar beserta biasanya dilengkapi dengan preview gambar, dropdown atau slider/slideshow gambar.

Kali ini kita hanya membuat galeri foto dengan menggunakan html5 dan css5 secara sederhana, cara pembuatannya, buatkanlah sebuah file baru dengan nama index.html dan gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Gallery Images</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

  <div class="responsive">
    <div class="gallery">
      <a href="images/1.jpg" target="_blank">
        <img src="images/1.jpg" alt="1"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/2.jpg" target="_blank">
        <img src="images/2.jpg" alt="2"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/3.jpg" target="_blank">
        <img src="images/3.jpg" alt="3"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/4.jpg" target="_blank">
        <img src="images/4.jpg" alt="4"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/5.jpg" target="_blank">
        <img src="images/5.jpg" alt="5"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/6.jpg" target="_blank">
        <img src="images/6.jpg" alt="6"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/1.jpg" target="_blank">
        <img src="images/1.jpg" alt="1"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/2.jpg" target="_blank">
        <img src="images/2.jpg" alt="2"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>

  <div class="clearfix"></div>
<p><br/></p>


  <div class="imgdropdown">
    <img src="images/1.jpg" width="200"/>
    <div class="wrapimg">
      <img src="images/1.jpg" class="imgdown">
      <div class="descdown">This Description Here</div>
    </div>
  </div>
  <div class="imgdropdown">
    <img src="images/2.jpg" width="200"/>
    <div class="wrapimg">
      <img src="images/2.jpg" class="imgdown">
      <div class="descdown">This Description Here</div>
    </div>
  </div>

  <p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>

</body>
</html>

Selanjutnya buatkanlah sebuah file css dan beri nama style.css dan simpan bersamaan dengan index.html, file css merupakan pengayaan dan gunakan kode dibawah ini.

body{
  font-family:helvetica, sans-serif, arial;
  font-size: 12pt;
}
*{
  box-sizing:border-box;
}
.gallery{
  border:1px solid #ccc;
}
.gallery:hover{
  border:1px solid #999;
}
.gallery img{
  width: 100%;
  height: 200px;
}
.gallery .desc{
  text-align: center;
  padding: 15px;
}
.responsive{
  padding: 6px;
  float: left;
  width: 24.99999%;
}
@media screen and (max-width:800px){
  .responsive{
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media screen and (max-width:485px){
  .responsive{
    width: 100%;
  }
}
.clearfix:after{
  content: " ";
  display: table;
  clear: both;
}
.imgdropdown{
  position: relative;
  display: inline-block;
}
.wrapimg{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.imgdropdown:hover .wrapimg{
  display: block;
}
.imgdown{
  width: 600px;
  height: 400px;
}
.descdown{
  padding: 15px;
  text-align: center;
}

 

Cara Membuat Tooltip Dengan HTML5 dan CSS3

Tooltip umumnya dibuat dengan jquery atau javascript, akan tetapi alangkah lebih mudah lagi membuat tooltip hanya dengan menggunakan css saja, tooltip adalah sebuah info yang tampil saat kursor diatas tujuan biasanya secara default pembawaan browser juga ada tooltipnya walau berbentuk umum dengan hanya menggunakan atribut title pada tag html yang dituju sebagai contoh <p title=”tooltip”></p> atau tag yang lainnya seperti <img title=”judul gambar”/>, namun tooltip pembawaan tidak bagus.

tooltip

Selain itu tooltip juga bisa berfungsi sebagai alert atau confirm, tetapi pada tutorial ini saya tidak membahas alert atau confirm yang mengharuskan penggunaan jquery atau javascript, untuk membuat tooltip menggunakan html5 dan css3 maka buatkan file html dengan nama index.html dan simpan disebuah folder baru, gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Tooltip Text</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
  <div class="tooltip">
    Left
    <span class="tooltipleft">Tooltip left</span>
  </div>
  <div class="tooltip">
    Top
    <span class="tooltiptop">Tooltip Top</span>
  </div>
  <div class="tooltip">
    Bottom
    <span class="tooltipbottom">Tooltip Bottom</span>
  </div>
  <div class="tooltip">
    Right
    <span class="tooltipright">Tooltip Right</span>
  </div>
</div>

</body>
</html>

Selanjutnya adalah desain pengayaan dengan menggunakan css, buatkan file css baru dengan nama style.css dan simpan bersamaan dengan index.html, gunakan kode dibawah ini.

body{
  font-family:helvetica, sans-serif, arial;
}
.container{
  width: 800px;
  margin:70px auto;
}
.tooltip{
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin: 20px;
  padding:5px;
}
.tooltip .tooltiptop{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltiptop{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltiptop::after{
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.tooltip .tooltipbottom{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipbottom{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipbottom::after{
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip .tooltipleft{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: -2px;
  right: 105%;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipleft{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipleft::after{
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip .tooltipright{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: -2px;
  left: 105%;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipright{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipright::after{
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

 

Cara Membuat Navigasi Menubar Dengan HTML5 dan CSS3

Cara membuat menu, navbar, navigation/navigasi, menubar, menu sidebar/sidemenu, menu topbar dengan html dan css. Navigasi menu umumnya merupakan menu topbar atau menu atas yang wajib ada disetiap website, biasanya dalam menu navigasi navbar ini berisi menu yang sangat penting untuk pengunjung website tersebut. Selain dari menu navbar penulis juga akan membahas tentang menu sidebar, untuk lebih jelas lihat dibawah ini.

Baca juga: Cara belajar menggunakan html paling dasar pertama kali

Menu Sidebar (Vertical Navigation Bar)

css-navigation-menu-1Vertical navigation bar merupakan menu yang terletak disamping kanan atau kiri dan biasanya disebut menu sidebar yang ada disetiap website seperti popular post, recent post, comment post dan lain-lain yang berisi judul artikel disetiap item menu sidebar tersebut. Untuk pembuatan menu sidebar atau vertical navigation bar adalah seperti dibawah ini.

Baca juga: Cara belajar menggunakan css paling dasar pertama kali

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
</ul>

Simpan kode diatas dengan nama sidebar.html dan juga buatkan file css dengan nama style1.css atau terserah anda saja, untuk sintak css seperti dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:200px;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
}
li{
  border-bottom:1px solid #ccc;
}
li a{
  display:block;
  text-decoration:none;
  color:#000;
  padding:8px 16px;
}
li a:hover{
  background-color:#555;
  color:#fff;
}
li.active a{
  background:#4169e1;
  color:#fff;
}
li:last-child{
  border-bottom:none;
}

Menu Topnav/Navbar (Horizontal Navigation Bar)

css-navigation-menu-2Horizontal navigation bar merupakan menu navbar atau topnav yang biasa disebut sebagai menu primery yang memang wajib ada disetiap website dan umum berisi menu item yang paling penting untuk penggunanya/pengunjungnya seperti berisi kategori terpenting. Untuk lebih jelas silahkan lihat dibawah ini.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
  <li class="right"><a href="#">Sign Up</a></li>
  <li class="right active"><a href="#">Sign In</a></li>
</ul>

Simpan file tersebut dengan nama index2.html dan buatkan file css dengan nama style2.css dan gunakan sintak css dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
  overflow:hidden;
}
li{
  float:left;
}
li a{
  display:block;
  text-decoration:none;
  color:#000;
  padding:14px 16px;
  text-align:center;
}
li a:hover{
  background-color:#555;
  color:#fff;
}
li.active a{
  background:#4169e1;
  color:#fff;
}
li.right{
  float:right;
}
ul.fixed-top{
    position: fixed;
    top: 0;
}
ul.fixed-bottom{
    position: fixed;
    bottom: 0;
}

Menu Dropdown (Dropdown Navigation Bar)

css-navigation-menu-3Dropdown navigation bar adalah menu item yang ada sub item-nya atau dropdown menu yang berisi sub item, untuk lebih jelas silahkan lihat kode pemrograman dibawah ini.

<ul class="navbar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
  <li class="dropdown">
    <a href="#" class="btndown">Dropdown</a>
    <ul class="itemdown">
      <li><a href="#">Item #1</a></li>
      <li><a href="#">Item #2</a></li>
      <li><a href="#">Item #3</a></li>
      <li><a href="#">Item #4</a></li>
    </ul>
  </li>
  <li class="right"><a href="#">Sign Up</a></li>
  <li class="right active"><a href="#">Sign In</a></li>
</ul>

Simpan file tersebut kedalam index3.html dan buatkan file css baru dengan nama style3.css dan gunakan kode css dibawah ini.

ul.navbar{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
  overflow:hidden;
}
ul.navbar li{
  float:left;
}
ul.navbar li a, .btndown{
  display:inline-block;
  text-decoration:none;
  color:#000;
  padding:14px 16px;
  text-align:center;
}
ul.navbar li a:hover, .dropdown:hover .btndown{
  background-color:#555;
  color:#fff;
}
ul.navbar li.active a{
  background:#4169e1;
  color:#fff;
}
ul.navbar li.right{
  float:right;
}
ul.navbar li.dropdown{
  display:inline-block;
}
.itemdown{
  display:none;
  position:absolute;
  bacground-color:#f9f9f9;
  margin:0;
  padding:0;
  box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  list-style-type:none;
}
.itemdown li{
  clear:both;
  float:none;
}
.itemdown li a{
  color:black;
  padding:12px 86px;
  display:inline-block;
  min-width: 100px;
  text-decoration:none;
}
.itemdown li a:hover{
  background-color:#f1f1f1;
}
.dropdown:hover .itemdown{
  display:block;
}

Responsif Navbar (Responsive Menu Topnav)

css-navigation-menu-4Responsif navbar merupakan responsive menu navigasi topbar yang membuat navbar dapat berjalan pada sisi desktop, tablet dan mobile phone dengan bentuk yang berbeda walau satu kerangka diantara perangkat desktop dengan perangkat mobile.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li class="right"><a href="#">Help</a></li>
</ul>

Simpan file tersebut dengan nama index4.html dan buatkanlah file css baru dengan nama style4.css dan gunakan kode css dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#333;
}
ul li{
  float: left;
}
ul li a{
  display:block;
  color:#fff;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
}
ul li:not(.active) a:hover{
  background-color:#111;
}
ul li.active a{
  background-color:#4169e1;
}
ul li.right{
  float:right;
}
@media screen and (max-width: 600px){
  ul li.right, ul li{
    float:none;
  }
}

Responsif Menu Sidebar (Responsive Sidenav)

css-navigation-menu-5Responsif menu sidebar merupakan menu pada perangkan desktop berbentuk menu sidenav/sidebar sedangkan pada perangkat tablet dan netbook berbentuk menu topnav/navbar sedangkan pada perangkat mobile berbentuk list menu. Untuk lebih jelas lihat kode dibawah ini.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
</ul>
<div class="content">
  <h1>Side Navigation</h1>
  <p>...</p>
</div>

Simpan file tersebut dengan nama index5.html dan buatkanlah file css baru dengan nama style5.css dan gunakan kode dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  width:25%;
  background-color:#f1f1f1;
  position:fixed;
  overflow:auto;
}
ul li a{
  display:block;
  color:#000;
  padding:8px 16px;
  text-decoration:none;
}
ul li.active a{
  background-color:#4169e1;
}
ul li:not(.active) a:hover{
  background:#555;
  color:#fff;
}
div.content{
  margin-left:25%;
  padding: 1px 16px;
  height:1000px;
}
@media screen and (max-width:1024px){
  ul{
    width:100%;
    height:auto;
    position:relative;
  }
  ul li a{
    float:left;
    padding:15px;
  }
  div.content{
    margin-left:0;
  }
}
@media screen and (max-width:485px){
  ul li a{
    float:none;
    text-align:center;
  }
}

Sekian tutorial kali ini semoga bermanfaat, untuk belajar kode diatas bisa anda gunakan codepen.io dan jsfiddle untuk belajar cepat dan mudah tanpa menggunakan software komputer anda.

Belajar CSS Dasar

CSS3 - Belajar CSS Dasar

CSS adalah singkatan dari Cascading Style Sheets yang merupakan sebuah tata cara dalam mengatur komponen yang ada pada sebuah web sehingga menjadi berbentuk dan berpenampilan baik klasik atau modern. Css adalah sebuah bahasa yang tidak digolongkan sebagai bahasa pemrograman akan tetapi hanya sebatas gaya atau style untuk html, css tidak bisa berdiri sendiri tanpa html/xhtml.

CSS hampir sama fungsinya dengan aplikasi pengolahan kata tingkat tinggi seperti Microsoft Word, LibreOffice Writer, OpenOffice Writer, Kingsoft Office Writer dan Corel WordPerfect yaitu dalam hal membuat style atau gaya sebuah dokumen baik heading, title, text, body text, bab, sub bab, header/footer, gambar dan lain-lain. Satu file css bisa digunakan untuk beberapa atau setiap file html.

Sejarah CSS

CSS merupakan sebuah teknologi baru yang disarankan oleh W3C (World Wide Web Consortium) pada tahun 1996, pada saat css distandarisasikan, Netscape Navigator (Sekarang Mozilla Firefox) dan Internet Explorer membuat browser baru untuk disesuaikan dengan mendukung standar css sehingga bisa berjalan bersamaan dengan html pada suatu browser. ada 3 versi css yaitu CSS1 dikembangkan untuk penekanan hanya pada format dokumen html (seperti word/writer) saja. CSS2 dikembangkan untuk berbagai format seperti menentukan posisi konten, format huruf font, tampilan layout, table, form dan media dan sangat dikhususkan untuk bisa dicetak dengan printer, sedangkan CSS3 adalah pengebangan dari CSS2 yang lebih ditekankan kepada desain website modern seperti mendukung animasi, transisi, 3d serta dengan cross platform yaitu bisa berjalan pada desktop, mobile dan table hanya dengan satu file, fitur baru pada CSS3 adalah media query, box-shadow, css math, border-image, css object model dan lain-lain.

Penulisan CSS

CSS bisa ditulis dengan 3 cara atau 3 tempat yaitu pada internal, inline dan eksternal yang akan kita bahas dibawah ini, sekarang kita akan membahas format penulisan css seperti dibawah ini.

p { color : royalblue ; }

Penjelasan: p adalah tag selector atau panggilan dari tag p pada dokumen html, {} adalah selector untuk tag, color adalah property untuk tag p, sedangkan royalblue adalah value (nilai) untuk property color. : adalah sama dengan atau nilai hasilnya sedangkan ; adalah tutup hasil value atau pemisah antara satu property dengan property lainnya.

Tag Selector tidak mesti harus menggunakan nama tag saja akan tetapi bisa juga dengan memanggil nilai atribut class dan id, untuk class biasanya awalannya adalah titik (.) sedangkan id adalah awalannya tanda pagar (#) sebagai contoh:

Class: .paragraf{color:royalblue;}
ID: #paragraf{color:royalblue;}

Inline Style Sheet

Inline style sheet adalah gaya penulisan css dalam tag html atau bisa dibilang menggunakan atribut style=”color:royalblue;” atau lebih jelas lihat contoh dibawah ini.

<p style="color:royalblue;">Ini adalah teks untuk paragraf</p>

Internal Style Sheet

Internal style sheet adalah gaya penulisan css di antara tag head (<head>… disini …</head>) dengan adanya tag <style> … disini sintaks css … </style> untuk lebih jelas silahkan lihat contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<style type="text/css">
body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}
</style>
</head>
<body>
<h1 id="title" class="title">Judul Web</h1>
<p class="paragraf" id="paragraf">Ini adalah artikel</p>
</body>
</html>

Eksternal Style Sheet

Eksternal style sheet adalah gaya penulisan css yang terpisah antara file css dengan file html yang hanya dihubungkan dengan tag <link href=”style.css” rel=”stylesheet”/> pada tag <head>, dengan cara ini bisa dengan hanya 1 file css bisa buat banyak file html sebagai contoh

File style.css

body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}

File index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1 id="title">Judul Web</h1>
<p class="paragraf">Ini adalah artikel</p>
</body>
</html>

Sekian tutorial kali ini semoga bermanfaat dan bisa menjadi ilmu baru bagi pelajar baru pemrograman web, terima kasih banyak karena telah mengunjungi blog saya ini.