Rabu, 01 November 2017

Dropdown Menu dengan CSS

Dropdown menu sangat bermanfaat untuk membuat taksonomi menu secara terstruktur. Biasanya digunakan jika menu pada website merupakan link kategori yang memiliki beberapa sub kategori. Dengan adanya dropdown menu, navigasi website menjadi mudah dan user-friendly. Penyajian menu secara dropdown dengan beberapa submenu.
Dropdown menu adalah navigasi yang banyak digunakan pada website, namun dalam pembuatannya dropdown menu selain menggunakan CSS juga sering dibantu dengan Javascript. Pada tutorial ini ane akan menunjukkan pembuatan dropdown menu menggunakan CSS tanpa bantuan Javascript sama sekali. Langsung disimak saja gan..

Berikut adalah syntax html nya
<html>
<head>
<title>Membuat Dropdown</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 align="center">Dropdown</h1>
<div class="menu-wrapper">
<ul class="menu-horizontal"><li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3 <span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1 <span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2 <span class="arrow"></span></a>
<ul class="submenu level-3">
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Setelah itu buat file css untuk meletakkan syntax css
body {
font-family: 'cambria', serif;
color: white;
background-color: #2c73ee;
}
.menu-wrapper {
margin:10px auto;
position: relative;
width:700px;
}
.menu-wrapper ul{
margin:0;
padding:0;
background-color: navy;
}
ul.menu-horizontal {
width:100%;
position: relative;
z-index:999;
}
ul.menu-horizontal li {
list-style: none;
}/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#DD3D36;
-webkit-transition:all 0.5s ease-in-out;
}
/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}
/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}
/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}ul.submenu li {
position: relative;
}
/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li ul li:hover ul.level-3 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

Hasil dari Dropdown Menu

Sekian tutorial kali ini, sampai bertemu di lain kesempatan, terimakasih..

Mega Menu Dropdown dengan CSS

01.01 Hima No comments

Mega menu adalah jenis dropdown menu yang menampilkan dropdown besar. Dropdown besar tersebut biasanya berisi halaman banyak sekali link, dan terkadang juga memiliki paragraf. Mega Menu digunakan pada situs-situs besar yang memiliki banyak sekali konten dan jenis halaman sehingga membutuhkan navigasi yang banyak, seperti situs-situs pemerintahan. Jadi, Mega Menu kurang cocok jika diterapkan pada blog. Navigasi menu memegang peranan penting dalam memberi petunjuk kepada visitor tentang kategori konten apa yang dimiliki.

Ciri-ciri menu pada mega menu dropdown

Menu akan muncul secara dropdown ketika dilakukan mouse hover
Menampilkan semua pilihan dalam panel yang besar
Menggunakan icon atau gambar untuk membantu user
Menyajikan konten terbaru yang berupa gambar, judul dan tanggal posting dari kategori menu yang telah diklik/ dipilih

Langsung saja tanpa basa-basi, ane bakal langsung share syntax html nya

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Mega Dropdown Menu</h1>

<h3>Himawan Ari Dwi Laksono</h3>

</div>

<ul>

<li><a href="#">Profile</a>

<h3 class="section-title">Section 1</h3>

<p>Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Mad wasim do metam la giu dolor. Dolor la samoi jud huuta la qui. Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Dolor la samoi jud huuta la qui.Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor.</p>

</div>

<h3>Links</h3>

<ul>

<li><a href="#">About Me</a></li>

<li><a href="#">About Blog</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contact/Hire Me</a></li>

<li><a href="#">Curriculum Vitae</a></li>

</ul>

</div>

<h3>Social Media Profile</h3>

<ul>

<li class="facebook"><a href="#">Me on Facebook</a></li>

<li class="twitter"><a href="#">Me on Twitter</a></li>

<li class="googleplus"><a href="#">Me on Google+</a></li>

<li class="linkedin"><a href="#">Me on LinkedIn</a></li>

<li class="dribbble"><a href="#">Me on Dribbble</a></li>

</ul>

</div>

</li>

<li><a href="#">Categories</a>

<h3><a href="#">Search Engine Optimization</a></h3>

<ul>

<li><a href="#">Link Building</a></li>

<li><a href="#">SEO Tools</a></li>

<li><a href="#">Study Cases</a></li>

</ul>

</div>

<h3><a href="#">Blogging</a></h3>

<ul>

<li><a href="#">Blogger Tricks & Tutorial</a></li>

<li><a href="#">Wordpress Tricks & Tutorial</a></li>

<li><a href="#">Content Strategies</a></li>

<li><a href="#">Make Money Blogging</a></li>

<li><a href="#">Blog Design</a></li>

</ul>

</div>

<h3><a href="#">Internet Marketing</a></h3>

<ul>

<li><a href="#">List Building</a></li>

<li><a href="#">Copy Writing</a></li>

<li><a href="#">Social Media Marketing</a></li>

<li><a href="#">Content Marketing</a></li>

<li><a href="#">Interview the Gurus</a></li>

</ul>

</div>

</li>

</ul>

</div>

</body>

</html>

Dan ini untuk syntax css nya
/* Css resets */
* {
padding:0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-box-sizing:border-box;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
body {
font-family: 'cambria', serif;
background-color: #2c73ee;
}
h1,h2,h2,h3,h4,h5 {
margin:0.3em 0 0.5em 0;
}
/* End css resets */

/* Css default */
@media (min-width:768px){
.container {
width:900px;
}
}
.container {
margin:3vh auto;
padding:10px;
}
.page-title {
margin:17px auto;
text-align: center;
color:#fff;
font-size: 17px;
}
.page-title h1 {
font-size:40px;
line-height: 1;
}
.page-title a{
color:#ff7777;
text-decoration: none;
}
.page-title a:hover{
text-decoration: underline;
color: #ff3333;
}
/* End css default */

.mega-menu, .mega-menu >ul {
position: relative;
background-color: #333;
height: 50px;
}
.mega-menu >ul >li {
display: inline-block;
padding:15.5px 0;
overflow: hidden;
}
.mega-menu >ul >li >a {
padding:17px;
color:#eee;
text-decoration: none;
}
.mega-menu >ul >li:hover {
background-color: #3399dd;
-webkit-transition:ease 0.3s;
}
.mega-menu .menu-detail {
height: 0;
visibility: hidden;
opacity: 0;
position: absolute;
}
.mega-menu >ul >li:hover >div.menu-detail {
opacity: 1;
height: 300px;
width:100%;
visibility: visible;
top:50px;
right:0;
left: 0;
z-index: 99;
background-color: #252525;
color:#fff;
-webkit-transition:height 1s;
-moz-transition:height 1s;
transition:height 1s;
border-top:3px solid #3399dd;
overflow: hidden;
}
.menu-detail .section {
padding:20px;
}
@media (min-width: 768px){
.menu-detail.profile .section-1 {
width:40%;
float: left;
}
.menu-detail.profile .links {
width:20%;
float: left;
}
.menu-detail.profile .social-media {
width:40%;
float: left;
}
.menu-detail.categories .seo {
width:33.33%;
float: left;
}
.menu-detail.categories .copywrite {
width:33.33%;
float: left;
}
.menu-detail.categories .im {
width:33.33%;
float: left;
}
}
.menu-detail .links ul li {
padding:10px 0;
display: block;
}
.menu-detail .links ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail .links ul li a:hover {
color:#2c73cc;
}
.menu-detail .social-media ul li {
display: block;
margin-bottom: 5px;
}
.menu-detail .social-media ul li a{
color:#fff;
text-decoration: none;
display: block;
width: 100%;
padding:7px 10px;
}
.social-media li.facebook {
background-color: #48649f;
}
.social-media li.twitter {
background-color: #3399dd;
}
.social-media li.googleplus {
background-color: #cc3333;
}
.social-media li.linkedin {
background-color: #2c73cc;
}
.social-media li.dribbble {
background-color: #dd3355;
}
.menu-detail.categories .section h3 a{
color:#fff;
}
.menu-detail.categories .section ul li {
padding:10px 0;
display: block;
}
.menu-detail.categories .section ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail.categories .section ul li a:hover {
color:#2c73cc;
}

Hasil dari Mega Menu Dropdown

Sekian tutorial untuk Mega Menu Dropdown yang telah sedikit ane jelaskan pada kesempatan kali ini, semoga postingan ini dapat bermanfaat dan menambah wawasn seputar HTML dan CSS. Bye..

Layout, Background dan Text Warna dengan HTML dan CSS

05.35 Hima No comments

Hallo semua, maaf nih ane sudah lama gak posting-posting diblog ini, karena sudah sibuk sama urusan kampus dan duniawi. Disini ane mau bagi-bagi tutorial kepada kalian dan sebagai tugas juga untuk Dosen Desain Web tentang merubah warna background dan text/ tulisan dengan menggunakan button di html. Langsung saja tanpa basa-basi disimak aja gan..

1. Pertama, buka tools Sublime Text 3, bisa menggunakan Notepad, Notepad++, Dreamweaver, Netbeans, dll. Disini ane menggunakan Sublime Text 3.
2. Kemudian buatlah file .html dan .css untuk memulai.
3. Yang pertama buat index.html terlebih dahulu. Tuliskan syntax dasar pembuatan web html.

<!DOCTYPE html>

<html>

<head>

<title>Latihan CSS</title>

</head>

<body>

</body>

</html>

4. Buat style.css untuk memulai mendesain layout.
5. Masih di style.css, buat pagewrap sebagai bungkus.

#pagewrep{

width: 1024px;

margin: 0 auto; }

6. Langkah berikutnya membuat header.

#header{

width: 1024px; height: 200px; line-height: 200px; color: black; text-align:

center; font-size: 25px; color:white; background-color: orange;

text-shadow: 2px 2px 5px; }

7. Buat bungkus menu, format untuk posisi menu, dan menu hover.

#menu{

width: 1024px; height: 50px; background-color: #FE4421;

}

.top-menu{

width: auto; height: 50px; padding-left: 30px; padding-right: 30px; text-align: center;

line-height: 50px; background-color: #FE4421; float: left; font- weight: bold; }

.top-menu:hover{

color: #FFFFFF; background-color: #FEB721; }
8. Setelah itu buat konten kiri dan hover di setiap konten pada layout.

#cont-l{

width: 250px; height: 320px; background-color: yellow; float: left; }

.cont-menu{

width: 200px; height: 30px; background-color: #74E01D; float: left; line-height: 30px;

margin-left: 25px; margin-bottom: 10px; text-align: center;

/*border-bottom: 1px solid #000000 font-weight: bold;*/ }

.cont-menu:hover{

color: #FFFFFF; background-color: #FEB721; }

9. Kemudian buat konten tengah untuk meletakkan text yang akan dirubah warna.

#cont-m{

width: 754px; height: auto; background-color: #FF33FF; float: left;

padding: 10px; }

10. Terakhir untuk style.css, buatlah footer.

#footer{

width: 1024px; height: 70px; background-color: aqua; float: left; text-align: center; color:white; }

11. Sekarang masuk ke index.html, buat div untuk id pagerwrep dan div untuk id header.

<div id="header">TUGAS 2 LAYOUT DAN MERUBAH WARNA BACKGROUND DAN TEKS</div>

</div>

12. Buat div untuk menu untuk meletakkan button yang berfungsi sebagai pengubah warna background dan text. Disini menggunakan function javascript sebagai trigger merubah warna.

function warna(color){

document.body.style.background=color;

document.getElementById('form').style.color=color;

}

</script>

</div>

13. Kemudian beralih ke konten kiri, buat Sub Menu.

</div>

14. Setelah itu beralih ke konten tengah, buat div id cont-m sebagai wadah untuk text.

<tr>

<h4>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. 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.</h4>

</td>

</tr>

</table>

</form>

15. Membuat footer, jangan lupa untuk selalu menyimpan setiap langkah proses pembuatan.

</div>

<div id="footer"><h3>Footer</h3></div>

</div>

</body>

</html>

16. Buka index.html untuk melihat hasil.

17. Klik Button Merah untuk menampilkan hasil.

18. Klik Button Biru untuk menampilkan hasil.

19. Klik Button Hijau untuk menampilkan hasil.

20. Selesai.

Embersea Rep Bot

22.24 Hima 2 comments

Hallo semua, udah pada tau kan update an minggu ini di AQW. yak bener sekali yaitu muncul nya class baru Blaze Binder, salah satu syarat untuk mendapatkan class ini adalah harus rank 10 Rep Embersea. Pada postingan kali ini ane bakal share bot rep embersea yang menurut ane lumayan cepat buat rank 10. Langsung saja di simak gan...

Peralatan yang di gunakan:
1. Le Bot 8.4, Download
2. Rep Embersea, Download

Cara menggunakan :
1. Buka Le Bot terlebih dahulu kemudian login
2. Klik "Bot Manager" pada kiri atas Le Bot
3. Pilih "Load", kemudian cari file .dmbot nya.
4. Klik "Active".

Mudah kan, untuk penggunaan jangka panjang/ lama Checklist lah "Auto Relogin" dan "Lag Killer" pada Le Bot.

Sekian yang dapat ane share, semoga bermanfaat, jangan lupa comment nya gan supaya ane bisa tau kesalahan/ bug dan juga dapat kembangin lagi blog ini ^_^
Banyak teman itu baik gan, makanya itu kalau ketemu sama ane di game jangan lupa nyapa ya, biasanya ane oll di Server Artix, nih char ane : Kevin the Avatar ^_^
Sampai jumpa di lain kesempatan...

Ancient Sigil Bot

23.44 Hima No comments

Hallo, pada postingan kali ini ane bakalan share file bot untuk dapetin barang-barang Merge Shop di Legioncrypt. Lumayan juga barang-barang nya :v

Teknologi Masa Depan oleh Microsoft

20.31 Hima No comments

Sejak dahulu kala, fantasi manusia akan masa depan sudah melayang jauh. Sewaktu teknologi saat itu belum mampu melakukan apa yang dibayangkan, manusia tumpahkan imajinasi tersebut ke karya fiksi dan seni. Namun bagi perusahaan teknologi seperti Microsoft, visi masa depan merupakan faktor esensial, mendorong mereka untuk terus membuat inovasi.

Pada bulan Oktober 2011, Microsoft mengungkap bayangan mereka tentang device masa depan dan bagaimana perangkat mempengaruhi kehidupan manusia. Dalam tiga tahun ke belakang ini, Microsoft memang sudah banyak melepas beragam produk dan layanan mutakhir, tapi momentumnya jadi kian cepat setelah HoloLens diperkenalkan di ajang pengumuman resmi Windows 10.

HoloLens adalah jawaban microsoft atas mulai populernya pemanfaatan augmented reality. Namun dalam mengusungnya, Microsoft meracik HoloLens sebagai jelmaan mutakhir teknologi hologram. Menariknya, HoloLens hanyalah satu dari banyak cara membawa manusia melangkah mendekati masa depan yang ideal. Belum lama, Microsoft mempublikasi versi baru video Productivity Future Vision, memperlihatkan gambaran seperti apa kehidupan manusia lima sampai sepuluh tahun ke depan.

Langsung saja simak videonya.