Cara membuat Navigasi menu responsive di html dan php dengan css

Cara membuat Navigasi menu responsive di html dan php dengan css

Cara membuat Navigasi menu responsive di html dan php dengan css

pada kesempatan kali ini freak programmer akan membagikan cara membuat menu responsive yang berupa navigasi yang mana cara yang admin gunakan adalah dengan memanfaatkan css.
langsung saja

1. buat file dengan nama index.html
isikan dengan source code berikut.
<!DOCTYPE html>
<html>
<head>
<title>Navigasi Menu Responsive by freakprogrammer.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="navcontainer">
<label class="show-menu" for="show-menu"><i class="fa fa-bars fa-2"></i></label>
<input autocomplete="off" id="show-menu" role="button" type="checkbox">
<ul id="menus">
<li><a href="www.freakprogrammer.com/" title="home">Home</a></li>
<li><a href="www.freakprogrammer.com/" title="pemrograman-web">Doenlaod</a></li>
<li><a href="www.freakprogrammer.com/" title="framework">Framework</a></li>
<li><a href="www.freakprogrammer.com/" title="teknologi-informasi">Sistem Informasi</a></li>
<li><a href="www.freakprogrammer.com/" title="belajar-seo">Tutorial</a></li>
<li><a href="www.freakprogrammer.com/" title="tips">Tips dan Trik</a></li>
</ul>
<div style="clear:both;">
</div>
</div>
</body>
</HTML>
2. buat file style.css dan masukan source code di bawah ini.
body{background: url(images/background.jpg);font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}
/*Navmenu*/
#navcontainer{background: #0024ff;}
#navcontainer ul {list-style-type:none;margin:0;padding:0;position: relative;}
#navcontainer li {display:inline-block;float: left;text-transform:uppercase;}
#navcontainer li a {padding:15px 20px;min-width:100px;height: 49px;text-align: center;line-height: 49px;color: #fff;text-decoration: none;}
#navcontainer li:hover a {background: #FE9800;}
#navcontainer li:hover ul a {background: #f3f3f3;color: #2f3036;height: 40px;line-height: 40px;}
#navcontainer li:hover ul a:hover {background: #FE9800;color: #fff;}
#navcontainer li ul {display: none;}
#navcontainer li ul li {display: block;float: none;}
#navcontainer li ul li a {width: auto;min-width: 100px;padding: 0 20px;text-align:left;}
#navcontainer ul li a:hover + .hidden, .hidden:hover {display: block;}
.show-menu {text-decoration: none;color: #fff;background: #FE9800;text-align: left;padding: 10px 5px;display: none; }
#navcontainer input[type=checkbox]{display: none;}
#navcontainer input[type=checkbox]:checked ~ #menus {display: block;}
#navcontainer .fa-2 {font-size: 2em;}
#navcontainer .fa-3 {font-size: 4em;}
#navcontainer .fa-4 {font-size: 7em;}
#navcontainer .fa-5 {font-size: 12em;}
#navcontainer .fa-6 {font-size: 20em;}
#navcontainer .fa-1,
#navcontainer .fa-2,
#navcontainer .fa-3,
#navcontainer .fa-4,
#navcontainer .fa-5,
#navcontainer .fa-6 {
  margin-right: 0.07142857em;
  margin-left:0.6em;
}
/*end-navmenu*/
/*css-styles-responsive*/
@media screen and (max-width:1180px){
 body,#navcontainer,div.span-14,div.span-24{width:100%!important;min-width:100%!important;}
}
@media screen and (max-width:980px){
    #navcontainer li a {min-width:80px;}
}
@media screen and (max-width:768px){
 #navcontainer ul {position: static;display: none;}
 #navcontainer li {border-bottom: 1px solid #fff;}
 #navcontainer ul li, #navcontainer li a {width: 100%;}
    #navcontainer li a{display:block;height:auto;line-height:normal;}
 #navcontainer li a {text-align:left;}
 .show-menu {display:block!important;line-height:30px;}
 .show-menu:hover {cursor:pointer;}
    label {margin:0!important;}
}
3. jika sudah jalankan file index.html di browser maka tampilan akan seperti gambar di bwah.
Cara membuat Navigasi menu responsive di html dan php dengan css
4. jika browser di perkecil layarnya maka akan responsive seperti gambar di bawah.
Cara membuat Navigasi menu responsive di html dan php dengan css
untuk warna bisa anda rubah sendiri di css. 
jika teman-teman males ngoding sendiri silahkan download file jadinya di Sini


Buka Komentar