Jadi kita mulai dengan menu yang ditampilkan di bagian atas jendela.
Anda telah melakukan banyak pekerjaan persiapan untuk menu ini. Anda mungkin ingat gradien warna cantik yang disimpan sebagai grafik satu piksel. Grafik ini sekarang akan digunakan. Namun, struktur HTML yang sesuai untuk area menu harus dibuat terlebih dahulu. Strukturnya mungkin sebagai berikut:
<div class="header"> <div class="header-top"> <h1>Konsultan Pajak Anda</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Beranda</a></li> <li><a href="#">Tentang Kami</a></li> <li><a href="#">Bagaimana Kami Bekerja</a></li> <li><a href="#">Kontak</a></li> <li><a href="#">Imprint</a></li> </ul> </div> <div class="header-img"> </div> </div>
Gambar latar belakang akan menggunakan grafik satu piksel dan diulang secara vertikal hingga elemen tersebut terisi sepenuhnya.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Setelah itu, menu dapat diformat. Secara prinsip, tidak ada yang perlu diperhatikan secara khusus. Aspek yang paling penting dalam jenis menu ini adalah sebagai berikut:
• Sembunyikan titik daftar dengan list-style-type: none;
• Pastikan entri daftar ditampilkan berdampingan.
Saya bekerja di sini - seperti yang Anda tahu - dengan gradien warna yang diimplementasikan melalui gambar. Saat ini, tentu saja tersedia banyak pilihan lain untuk menu. Misalnya, berpikir tentang kerangka kerja JavaScript seperti jQuery. Menghadirkan semua opsi tersebut tentu melebihi batas di sini. Namun, sekarang sudah ada banyak generator online yang memungkinkan pembuatan menu dengan hanya beberapa klik. Salah satunya - tanpa penilaian, apakah ini yang terbaik di kelasnya - dapat ditemukan di http://www.cssmenubuilder.com/.
Pada dasarnya, saya memilih varian berikut:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Yang penting sebenarnya adalah kondisi Hover. Ketika kejadian ini terjadi, gambar latar belakang yang berbeda akan ditampilkan.
Menu kanan
Situs web ini tidak hanya memiliki menu di bagian atas, tetapi juga ada satu lagi di area jendela kanan.
Menu ini termasuk dalam area div dengan kelas content-right. Untuk saat pengembangan halaman, saya hanya menambahkan konten palsu di sana.
<div class="content-right"> <h2>Menu Utama</h2> <ul> <li><a href="#">Tautan 1</a></li> <li><a href="#">Tautan 2</a></li> <li><a href="#">Tautan 3</a></li> <li><a href="#">Tautan 4</a></li> <li><a href="#">Tautan 5</a></li> <li><a href="#">Tautan 6</a></li> <li><a href="#">Tautan 7</a></li> <li><a href="#">Tautan 8</a></li> <li><a href="#">Tautan 9</a></li> <li><a href="#">Tautan 10</a></li> </ul>
Area ini pertama-tama ditempatkan di lokasi yang tepat dan dengan ukuran yang diinginkan.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Selanjutnya adalah mendefinisikan menu sebenarnya. Kali ini, entri-entri tersebut ditata secara vertikal. Jadi, Anda hanya perlu memastikan titik daftar tersembunyi. Sisanya pada akhirnya tergantung pada preferensi desain Anda.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Semoga tampilan di browser akan menjadi seperti ini:
Menu Bagian Bawah
Di bagian bawah situs web akan ada menu tambahan. Di PSD-Tutorials.de, menu seperti itu juga digunakan untuk menyediakan tautan ke informasi umum.
Pada situs web kami, terdapat catatan hak cipta tambahan. Kedua hal ini sebenarnya sangat tipikal untuk situs web. Pertama-tama adalah struktur HTML lagi.
<div class="bottom"> <ul> <li><a href="index.html">Beranda</a></li> <li><a href="#">Tentang Kami</a></li> <li><a href="#">Berita Terbaru</a></li> <li><a href="#">Pusat Kontrol</a></li> <li><a href="#">Kontak</a></li> <li><a href="#">Imprint</a></li> <li><a href="#">Peta Situs</a></li> </ul> <p>© Hak Cipta 2014 oleh PSD-Tutorials.de</p> </div>
Ini adalah daftar ul sederhana. Setiap entri daftar berisi entri menu. Di bawah daftar ul terdapat elemen p di mana catatan hak cipta berada. Yang belum ada sekarang adalah sintaks CSS lagi.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Cara Anda mendesain area bawah sepenuhnya terserah Anda. Saya menggunakan gradient lagi. Anda juga dapat menggunakan warna latar belakang sederhana atau menggunakan sintaks CSS3 langsung. Namun, dalam kasus varian grafik saya, penting bahwa pengulangan dihentikan dengan background-repeat: no-repeat;.
Mulailah dengan melihat hasilnya:
Yang menonjol di sini adalah garis putih di samping entri menu individu. Ini ditentukan melalui berbagai pengaturan border-left, artinya setiap pengaturan berlaku untuk margin elemen kiri.
Secara keseluruhan, sintaks untuk menu bawah akan terlihat seperti berikut:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Ada hal unik di sini dibandingkan dengan menu atas. Sebenarnya, tidak akan ada grafik tambahan dimuat saat hover. Namun, untuk memberi tahu pengunjung bahwa mereka mengarahkan kursor ke tautan, setiap tautan akan digarisbawahi saat peristiwa Hover terjadi.
Pada akhir tutorial ini, langkah-langkah dasar untuk membuat situs web sudah selesai. Yang masih kurang sekarang adalah mempercantik halaman tersebut. Lebih lanjut tentang itu akan dibahas dalam tutorial selanjutnya.
