Membuat Floating Menu Navigation Menggunakan HTML Dan CSS
2/16/2019
Add Comment
Floating Menu Navigation adalah menu yang biasanya tidak berubah atau tetap ketika kita melakukan perubahan pada layar, seperti scroll ganti halaman dll,umumya floating menu ditempatkan di bagian atas atau kiri halaman web. Floating Menu Navigation digunakan untuk menampilkan terus menu navigasi halaman web agar memberikan efek yang bagus untuk tampilan web dan memudahkan navigasi bagi pengunjung. Untuk itu, dalam tutorial ini akan membahas bagaimana cara membuat Floating Menu Navigation menggunakan HTML dan CSS.
Untuk Membuat Floating Menu Navigation
pada tutorial ini cukup melakukan dua langkah mudah
Langkah 1. Buat file HTML
Buat file HTML kemudian simpan dengan
nama floatingmenu.html, kemudian tulis dengan kode berikut;
<html>
<head>
<link href="menu_style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id='menu_div'>
<li id="sitename">emodjeh<br>.com</li>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Feedback</a></li>
</div>
<div id="content">
<h1>Membuat Floating Navigation Menu Menggunakan HTML dan CSS</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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>"Floating Menu Navigation adalah menu yang biasanya tidak berubah atau tetap ketika kita melakukan perubahan pada layar, seperti scroll ganti halaman dll,umumya floating menu ditempatkan di bagian atas atau kiri halaman web. Floating Menu Navigation digunakan untuk menampilkan terus menu navigasi halaman web agar memberikan efek yang bagus untuk tampilan web dan memudahkan navigasi bagi pengunjung. Untuk itu, dalam tutorial ini akan membahas bagaimana cara membuat Floating Menu Navigation menggunakan HTML dan CSS. "</p>
<br>
<p>"Pada langkah ini kita menggunakan style sederhana untuk membuat menu navigasi floating.
Cukup untuk memastikan bahwa menu tetap terlihat / tidak bergerak ketika melakakukan scrolling pada halaman web.
Selesai, penjelasan diatas merupakan cara sederhana untuk membuat Floating Menu Navigation menggunakan HTML dan CSS. Tentunya jika ingin lebih menarik bisadisesuaikan dengan kebutuhan masing masing web.
Jangan Lupa Share!!!
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."<p>
</div>
</div>
</body>
</html>
Pada langkah ini kita menggunakan dua <div> , satu untuk menu dan yang lainnya untuk konten halaman web. Di bawah <div> menu terdapat beberapa tautan sampel dan di <div> konten kita menambahkan beberapa konten
sampel untuk pengujian apakah menu floating bekerja atau tidak, karena pengguna
perlu menguji dengan menggulir / scrolling halaman web. Pada file ini juga menambahkan
File 'menu_style.css' yang akan dibuat di langkah berikutnya.
Langkah 2. Buat file CSS
Buat file CSS kemudian simpan dan
berinama :menu_style.css”, lalu isi file tersebut dengan kode css berikut;
body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#ECF0F1;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#menu_div
{
padding:0px;
margin:0px;
width:180px;
height:100%;
background-color:#2E2E2E;
position:fixed;
top:0px;
left:0px;
}
#menu_div li
{
border-bottom:1px solid #424242;
list-style-type:none;
text-align:left;
}
#menu_div #sitename
{
font-size:40px;
margin-top:50px;
margin-bottom:30px;
padding:0px;
padding-left:10px;
color:white;
border-bottom:none;
cursor:pointer;
}
#menu_div li a
{
height:50px;
line-height:50px;
display:block;
color:silver;
text-decoration:none;
font-size:18px;
padding-left:20px;
}
#menu_div li:hover a
{
color:white;
}
#content
{
width:815px;
margin-left:170px;
margin-top:40px;
text-align:center;
}
#content h1
{
margin-top:50px;
font-size:45px;
color:#626567;
}
#content h1 p
{
font-size:18px;
width:100%;
margin:0px;
margin-top:10px;
}
#content p
{
color:#4D5656;
width:600px;
margin-left:110px;
}
Pada langkah ini kita menggunakan style
sederhana untuk membuat menu navigasi floating.
Cukup untuk memastikan bahwa menu tetap
terlihat / tidak bergerak ketika melakakukan scrolling pada halaman web.
Selesai, penjelasan diatas merupakan cara sederhana untuk membuat Floating Menu Navigation menggunakan HTML dan CSS. Tentunya
jika ingin lebih menarik bisadisesuaikan dengan kebutuhan masing masing web.
0 Response to "Membuat Floating Menu Navigation Menggunakan HTML Dan CSS"
Post a Comment