Rumah > Artikel > hujung hadapan web > Reka bentuk menu bar navigasi CSS: reka bentuk berbilang gaya menu bar navigasi
Reka bentuk menu bar navigasi CSS: Mereka bentuk berbilang gaya menu bar navigasi memerlukan contoh kod khusus
Bar navigasi ialah komponen penting tapak web Bahagian antara muka, melalui gaya dan susun atur yang berbeza, boleh memberikan pengguna navigasi yang ringkas dan intuitif. Artikel ini akan memperkenalkan dan menyediakan pelbagai gaya reka bentuk menu bar navigasi CSS, dan memberikan contoh kod yang sepadan.
kod HTML:
<div class="vertical-menu"> <a href="#">菜单项 1</a> <a href="#">菜单项 2</a> <a href="#">菜单项 3</a> <a href="#">菜单项 4</a> </div>
Kod CSS:
rreee#🎜🎜 🎜🎜#Menu bar Navigasi Mendatar:.vertical-menu { width: 200px; } .vertical-menu a { display: block; padding: 10px; text-decoration: none; color: #000; } .vertical-menu a:hover { background-color: #ccc; }
Kod CSS:
rreee#🎜🎜 🎜🎜#Menu Turun:Menu lungsur ialah gaya menu bar navigasi biasa, yang boleh memberikan lebih banyak pilihan navigasi dengan menyembunyikan sekumpulan item menu yang berkaitan dalam kotak lungsur. Kod untuk melaksanakan menu lungsur adalah seperti berikut:
<div class="horizontal-menu"> <a href="#">菜单项 1</a> <a href="#">菜单项 2</a> <a href="#">菜单项 3</a> <a href="#">菜单项 4</a> </div>
.horizontal-menu { display: flex; } .horizontal-menu a { flex: 1; padding: 10px; text-align: center; text-decoration: none; color: #000; } .horizontal-menu a:hover { background-color: #ccc; }
Through contoh kod di atas, kami mencapai Peningkatan kesan gaya menu bar navigasi menegak, menu bar navigasi mendatar dan menu lungsur. Anda boleh terus mengoptimumkan dan melaraskan gaya mengikut keperluan anda sendiri, seperti mengubah suai warna latar belakang, gaya fon, susun atur pilihan navigasi, dsb.
Ringkasan:
Reka bentuk menu bar navigasi CSS ialah bahagian asas pembangunan web Melalui gaya dan reka letak yang berbeza, ia boleh memberikan pengguna pengalaman navigasi yang baik. Melalui contoh kod menu bar navigasi menegak, menu bar navigasi mendatar dan menu lungsur yang diperkenalkan dalam artikel ini, anda boleh dengan mudah melaksanakan gaya bar navigasi yang berbeza dan menyesuaikannya mengikut keperluan. Saya harap artikel ini akan membantu kerja reka bentuk web anda!Atas ialah kandungan terperinci Reka bentuk menu bar navigasi CSS: reka bentuk berbilang gaya menu bar navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!