RobbiHeN

[:en]Membuat Responsive Menu Dengan CSS – Part 2[:]

[:en]

Jika meneruskan tutorial pada artikel sebelumnya maka ada beberapa modifikasi script pada file index.html dan style.css yang lama dan menambahkan file css baru yaitu mobile.css

Modifikasi index.html

Kemudian buat file css baru mobile.css dan buat link di index.html

<html>
<head>
    <title>Menu Responsive Obi.ninja</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>

Lakukan modifikasi pada file index.html untuk menambahkan menu mobile dengan menambahkan baris script <label><input> dan menambahkan id=”menu” pada <ul> seperti contoh dibawah yang berfungsi untuk membuat UI seperti diatas dan input checkbox berfungsi untuk aksi “klik” menu untuk menampilkan menu lengkapnya

<body>
<nav>
    <label for="show-menu" class="mobilemenu"></label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">

Modifikasi style.css

Lakukan juga modifikasi pada style.css sebagai berikut :

1. input checkbox pada baris paling bawah saja

input[type=checkbox]{
    display: none;
}

 2. tambahkan ukuran lebar 100% pada tag nav (sebelumnya tidak didefinisikan ukuran lebarnya)

nav{
    -webkit-font-smoothing:antialiased;
    margin :0;
    padding : 0;
    font-family: 'Lato',Calibri,Arial,sans-serif;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    font-size: 1em;
    width: 100%;
}

 3. ganti penggunaan properti visibility menjadi display, artinya pada awal asalnya visibility : hidden menjadi display : none dan ketika ada aksi hover awalnya visibility : visible menjadi display block

nav li ul {
    display: none;
    opacity: 0;
    z-index: 1;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
nav li:hover ul {
    opacity: 1;
    display: block;
}

 4. pindahkan height yang asalnya ada di tag li ke tag li a

li{
    float:left;
    width: 13%;
    min-width: 150px;
}

li a{
    height: 150px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

Lanjut ke bagian terakhir

[:]

robbihen

, , ,

Leave a Reply