Tampilkan postingan dengan label desain-web. Tampilkan semua postingan

Menyatukan beberapa file PHP menjadi sebuah halaman berbentuk kotak-kotak dan memisahkanya per Bab

Misalkan anda mempunyai beberapa file PHP dan anda ingin menyatukan beberapa file PHP tersebut menjadi sebuah halaman menjadi beberapa blok. ini juga pernah saya alami waktu saya dikasih tugas desain Pemerograman web. kita akan membuat desain web dengan html dan css untuk menempatkan file-file PHP tersebut. pertama kita buat dulu kerangka htmlnya seperti berikut:

<html>
<head><title>Tugas</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Francois One', sans-serif;
background: url("1.jpg");
}
.header {
height: 150px;
background-color: rgba(10, 100, 205, 0.9);
padding: 0;
font-family: 'Francois One', sans-serif;
}
.left {
width: 50%;
float: left;
background-color: transparent;
}
.right {
width: 50%;
float: right;
}
.box1{
margin: 25px auto;
padding: 10px;
width: 400px;
border-radius: 10px;
border: 1px solid #ddd;
background: linear-gradient(-90deg, rgba(0,0,255,0.6), rgba(0,255,0,0.6));
text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em yellow;
}
label {
width: 85px;
height: auto;
float: left;
margin: 8px auto;
}
input[type=text]{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
background: blue;
}
input[type=text]:hover{
box-shadow: 0 0 6px rgba(35, 173, 278, 1);
background: #fff;
}
input[type=submit], input[type=reset]{
padding: 5px;
width: 90px;
cursor: pointer;
border-radius: 5px;
border: none;
background: #fff;
margin: 5px 95px;
display: inline-block;
}
input[type=submit]:hover, input[type=reset]:hover{
background: rgba(0,0,0,0.5);
color: #fff;
}
.footer {
heigh: 100px;
background-color: #ccc;
padding: 10px;
font-weight: bold;
}
.clear {
clear: both;
}
.h1, .h2{
text-align: center;
}
ul {
list-style: none;
background-color: yellow;
width: 100%;
bottom: 0;
text-align: center;
}
li{
display: inline-block;
padding: 10px;
background-color: yellow;
}
li:hover {
background-color: blue;
color: #fff;
}
li:current {
background-color: orange;
}
a {
text-decoration: none;
}
a:hover{
color: #fff;
}
right {
float: right;
}
select, textarea{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
}
</style>
</head>
<body>
<div class="header">
<br>
<h1 class="h1">Tugas Pemerograman PHP dengan style CSS</h1>
<h2 class="h2">Diki Munggaran 1501110039</h2>
<br>
<ul>
<li><a href="?page=bab1">Bab 1</a></li>
<li><a href="?page=bab2">Bab 2</a></li>
<li><a href="?page=bab3">Bab 3</a></li>
<li><a href="?page=bab4">Bab 4</a></li>
<li><a href="?page=bab5">Bab 5</a></li>
<li><a href="?page=bab6">Bab 6</a></li>
<li><a href="?page=bab7">Bab 7</a></li>
<li><a href="?page=bab8">Bab 8</a></li>
</ul>
</div>
<?php 
        if(isset($_GET['page'])){
        $page=htmlentities($_GET['page']);
        }else{
        $page="bab1";
        }
        
        $file="$page.php";
        $cek=strlen($page);
        
        if($cek>30 || !file_exists($file) || empty($page)){
        include ("bab1.php");
        }else{
        include ($file);
        }
?>
<div class="clear">
<div class="footer">
Copyright &copy; <?php echo date("Y");?> Diki Munggaran All Right Reserved. <right>We made with love</right>
</div>
</body>
</html>


Simpan file diatas dengan nama index.php atau nama lain sesuai keinginan anda. selanjutnya kita buat file bab4.php berikut ini scriptnya:

<div class="left">
<div class="box1"><?php include "input01.php"; ?></div>
<div class="box1"><?php include "input03.php"; ?><br><?php include "proses03.php"; ?></div>
<div class="box1"><?php include "input05.php"; ?><br><?php include "proses05.php"; ?></div>
<div class="box1"><?php include "input07.php"; ?><br><?php include "proses07.php"; ?></div>
<div class="box1"><?php include "input09.php"; ?><br><?php include "proses09.php"; ?></div>
</div>
<div class="right">
<div class="box1"><?php include "input02.php"; ?><br><?php include "proses02.php"; ?></div>
<div class="box1"><?php include "input04.php"; ?><br><?php include "proses04.php"; ?></div>
<div class="box1"><?php include "input06.php"; ?><br><?php include "proses06.php"; ?></div>
<div class="box1"><?php include "input08.php"; ?><br><?php include "proses08.php"; ?></div>
</div>

Untuk file bab1 sampai bab8 cara penulisanya sama seperti bab4.php cuma beda isinya saja. untuk file phpnya bisa anda download disini. atau jika ingin yang udah jadi bisa di download disini
Read More

Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail


Selamat Malam Bertemu lagi dengan Saya Juanas di tutorial Cara Membuat Form Pencarian yang bisa disembunyikan seperti di gmail, ketika icon cari di klik maka form pencarian akan muncul. Saya Menggunakan efek toggle di button nya kemudian ditambahkan style position nya absolute dan z-index nya100 agar form pencarian menumpuk diatas navbar dan berada di layer paling atas, oke langsung saja buat ini dia scriptnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Web</title>
</head>
<body>
<div class="topnav">
<li><a class="ubahclass" id="home">Home</a></li>
<li><a class="ubahclass" id="blog">Blog</a></li>
<li><a class="ubahclass" id="kontak">Kontak</a></li>
<li><a class="ubahclass" id="profil">Profil</a></li>
<div id="flip" class="btn-link"><i class="fa fa-search"></i></div>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</li>
</div>
<div id="panel">
<button id="close"><i class="fa fa-arrow-left"></i></button>
<input type="text" style="width:70%;" placeholder="Cari teman, pesan atau halaman disini">
<button class="btns"><i class="fa fa-search"></i></button>
</div>
</nav>
</div>
</body>
</html>

Lalu ini javascriptnya :

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("fast");
    });
$("#close").click(function(){
        $("#panel").slideToggle("fast");
    });
});

dan untuk css nya saya gunakan seperti ini:

#panel, #flip {
  text-align: center;
  background-color: transparent;
  border: none;
width: 10px;
float: right;
position: absolute;
display: inline-box;
visibility: visible;
}
#flip {
cursor: pointer;
}
#flip:hover{
color: #00ccff;
}
#panel {
    padding: 10px;
width: 100%;
top: 0;
    display: none;
float: right;
background: #fff;
z-index: 4;
}

dan ini adalah tampilan form pencarian nya

Sekian tutorial cara membuat form pencarian yang tersembunyi semoga bermanfaat, terimakasih
Read More

Cara Membuat Sticky Navigation (Fixed Position saat di scroll)


Selamat Sore, Pada postingan sebelumnya saya udah membahas tentang cara membuat template one page yang responsive. Kebanyakan template yang sekarang jika halaman di scroll ke bawah maka navbar akan melayang diatas halaman dan jika discroll lagi ke bawah maka navbar akan kembali ke posisi semula seperti pada gambar diatas, nah untuk membuatnya kita membutuhkan jquery yang akan menangani efek on scroll tersebut. pertama buat dulu htmlnya seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>Sticky Navigation</title>
  <link href="sticky.css" rel="stylesheet">
  <script src="js/jquery.js"></script>
  <script src="sticky.js"></script>
</head>
<body>
  <!-- Container -->
  <div class="container">

    <h1>Sample Header</h1>

      <!-- navigation -->
      <nav>
        <ul class="clearfix">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </nav>
      <!-- Content -->
      <div class="content">
        <br>
        <h2>Content Header</h2>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
</body>
</html>

Lalu CSS nya seperti berikut:

* {
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}
h1 {
  background-color: #305782;
  color: #fff;
  padding: 60px 25px;
  margin: 0;
}
nav {
  z-index: 100;
  background-color: #e7ecf2;
}
.nav-placeholder {
    margin: 0 0 40px 0;
    background: #e7ecf2;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
}
.fixed .nav-inner {
  padding: 0 10%;
}
.fixed .nav-inner-most {
  max-width: 80%;
  margin: 0 auto;
  background-color: #e7ecf2;
}
nav ul {
  margin: 0;
  padding: 0;
}
.clearfix {
  width: 100%;
  background-color: #e7ecf2;
}
nav ul li {
  list-style: none;
  text-align: center;
  display: inline-block;
}
nav ul li a:link,
nav ul li a:visited {
  display: inline-block;
  text-decoration: none;
  padding: 10px 25px;
  background-color: #e7ecf2;
  border-right: 2px solid #d5dce4;
  color: #33557c;
  font-size: 90%;
  font-weight: bold;
}
.content {
  margin: 100px auto;
}

dan untuk javascriptnya seperti berikut :

jQuery(document).ready(function() {

  var navOffset = jQuery("nav").offset().top;

  jQuery("nav").wrap('<div class="nav-placeholder"></div>');
  jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

  jQuery("nav").wrapInner('<div class="nav-inner"></div>');
  jQuery("nav-inner").wrapInner('<div class="nav-inner-most"></div>');

  jQuery(window).scroll(function() {
    var scrollPos = jQuery(window).scrollTop();
    jQuery(".status").html(scrollPos);

    if (scrollPos >= navOffset) {
      jQuery("nav").addClass("fixed");
    }else{
      jQuery("nav").removeClass("fixed");
    }

  });
});

Ok Selamat mencoba. semoga bermanfaat.
Untuk membuat sticky navigation seperti ini bisa juga anda menggunakan plugin smint bisa anda download di http://www.outyear.co.uk/smint/
Read More

Cara Membuat Template Web One Page Responsive


Assalamualaikum wr. wb. Ketemu lagi dengan saya. Kali ini saya akan membahas cara membuat template one page yang responsive. Membuat template bisa anda jadikan untuk menambah penghasilan yang lumayan karena harga per template rata-rata sekitar $25 anda bisa memasarkanya di themeforest.net. Nah kali ini saya akan share cara membuat template yang sederhana nantinya bisa anda kembangkan lagi. pertama kita buat dulu struktur folder sperti ini

folder_project:
 -css
-fonts
-js
-img

lalu di folder_project buat file index.html isinya seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Gym - Personal Training</title>
<meta name="viewport" content="width/device-width, initial-scale=1.0">
<link href="css/blueberry.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font-size: 180%;
line-height: 120%;
padding: 5% 0;
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%;
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p {
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url("img/the-gym.png") no-repeat center;
}
nav {
float: right;
padding: 30px 20px 20px 0;
}
#menu-icon {
display: none;
width: 40px;
hight: 40px;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
.current {
color: #fff;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin: 0 auto;
max-width: 1140px;
margin-top: 110px;
}
.blueberry {
max-width: 960px;
margin-top: 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
display: inline;
}
aside {
float: right;
margin: 0 auto;
width: 34%;
height: auto;
padding: 4%;
display: inline;
}
ul.gym li {
padding-left: 3%;
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.70;
}
footer p, footer h3 {
color: #fff;
}
footer p a {
color: #fff;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.socila li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #111;
max-height: 50px;
text-align: center;
opacity: 0.50;
color: #fff;
}
/********************MEDIA!!!!*********************/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 748px) {
header {
position: absolute;
}
#menu-icon {
display: block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
article {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
aside {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}

</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"><img src="img/icon.png"></a>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Trainer</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides">
<li><img src="img/inside-gym.png">
<li><img src="img/push-ups.png">
<li><img src="img/chest-fly.png">
<li><img src="img/training.png">
</ul>
</div>
</div>
</div>
<section>
<img src="img/trainers.png">
<h1>Best Trainers Around!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/location.png">
<h1>Local And Convenient</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/check.png">
<h1>Check Us Out -Free!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<div class="clear"></div>
<article>
<img src="img/gym-classes.jpg">
</article>
<aside>
<h2>Our Group Class Schedule:</h2>
<ul class="gym">
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
</ul>
</aside>
<div class="clear"></div>
<section>
<h1>Ladies Section</h1>
<img src="img/ladies-gym.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>The Gym Floor</h1>
<img src="img/gym-floor.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>Free Heights</h1>
<img src="img/free-weights.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<footer>
<section>
<h3><b>The Gym</b></h3>
<p><b>215-555-5555</b><br><br>
1700 Cestrus Street<br>
Philipina, Pa 19102<br>
trainer@thegym.com</p>
</section>
<section>
<h3>Connect With Us!</h3>
<ul class="social">
<li><a href="#"><img src="img/facebook1.png"></a></li>
<li><a href="#"><img src="img/googleplus.png"></a></li>
<li><a href="#"><img src="img/twitter1.png"></a></li>
<li><a href="#"><img src="img/youtube1.png"></a></li>
</ul>
</section>
<section>
<img src="img/weight-lifter.png">
</section>
</footer>
<footer class="second">
&copy; Copyrights 2016 - The Gym
</footer>
</body>
</html>

kemudian untuk folder css diisi css dari blueberry.css
untuk folder js diisi jquery.js dan jquery.blueberry.js
untuk folder img bahan gambarnya bisa didownload disini
dan untuk folder fonts bisa diisi dengan font-awesome

nah untuk file blueberry.css dan jquery.blueberry.js filenya dari mana? itu dari plugin blueberry slider untuk blueberry slider bisa didownload di http://marktyrrell.com/labs/blueberry/

Oke Semoga bermanfaat
Read More

Cara Membuat Navbar Responsiv dengan CSS Sendiri


Selamat sore Guys kali ini kita akan membuat navbar yang responsive dengan css. Jika dibuat dengan bootstrap itu gampang, tetapi jika membuat dengan css secara manual bagaimana caranya? oke langsung saja. Pertama kita buat dulu struktur htmlnya seperti berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery.js"></script>
  </head>
  <body>
    <header>
      <h1>Best Website Since Google</h1>
    </header>
    <nav>
      <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>About</li></a>
        <a href="#"><li>Blog</li></a>
        <a href="#"><li>Shop</li></a>
        <a href="#"><li>Gallery</li></a>
        <a href="#"><li>Contact</li></a>
      </ul>
      <div class="handle">Menu</div>
    </nav>
    <section>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <script>
      $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
      });
    </script>
  </body>
</html>

lalu buat cssnya seperti berikut:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
header {
  background: #00795f;
  width: 100%;
  padding: 40px 0;
  color: #fff;
  text-align: center;
}
a {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}
nav ul {
  background-color: #43a286;
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: center;
  margin: 0;
  -webkit-transition: max-height 0.04s;
  -ms-transition: max-height 0.04s;
  -moz-transition: max-height 0.04s;
  -o-transition: max-height 0.04s;
  transition: max-height 0.04s;
}
nav ul li {
  display: inline-block;
  padding: 20px;
}
nav ul li:hover{
  background-color: #399077;
}
section {
  line-height: 1.5em;
  font-size: 0.9em;
  padding: 40px;
  width: 75%;
  margin: 0 auto;
}
.handle {
  width: 100%;
  background: #005c48;
  text-align: left;
  box-sizing: border-box;
  padding: 15px 50px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  display: none;
}

@media screen and (max-width: 500px){
  nav ul {
    max-height: 0;
  }
  .showing {
    max-height: 20em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 50px;
    text-align: left;
  }
  .handle {
    display: block;
  }
}

Pada css diatas ada kode @media screen and (max-width: 500px) nah itulah yang membuatnya responsive Pada layar dengan lebar 500px css yang digunakan adalah  nav ul {
    max-height: 0;
  }
  .showing {
    max-height: 20em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 50px;
    text-align: left;
  }
  .handle {
    display: block;
  }

Lalu ada sedikit kode javascript
    <script>
      $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
      });
    </script>
Kode tersebut berfungsi jika tombol menu diklik maka akan menampilkan isi menunya dengan efek togle. Ok Sekianlah tutorial dari saya tentang cara membuat navbar yang responsive, semoga bermanfaat.
Read More
Langganan: Postingan ( Atom )