Menu Background Keren

Menu Background Keren

Pada pertemuan kali ini saya akan memberikan menu dengan background menu yang keren dengan dropdown image. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :

Tag CSS nya

<style type="text/css"> .container { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: #ffff; margin: 24px 0; padding: 0; height:200px; width:100%; } h1 { color: #535353; font-size: 1.25em; margin: 0 0 12px 10px; white-space: nowrap; font-weight: normal; } #menuwrapper { border-top: 1px solid #000; border-bottom: 1px solid #333; background-color: #909090; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufDEInIb92zcTLsod1t4d5Xfq7jL-zKYAy-f_qzExIlJj6l4lB0nrQYacazh4UZolvDm0X6JC6LvePoCZhcSojXzo-pF0G-KJlg1xsZ44r8au9G2MqRsde3exQGkYhc9OdCQEj9LUadwK/s1600/p7exp_mbar.jpg); background-repeat: repeat-x; } .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } #p7menubar { width: 36em; } #p7menubar, #p7menubar ul { padding: 0; margin: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; } #p7menubar a { display: block; text-decoration: none; padding: 5px 10px 5px 10px; border-right: 1px solid #333; font-size: .85em; color: #CCCCCC; } #p7menubar a.trigger { padding: 5px 16px 5px 10px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBLWUmUwcc-_uWp4h_btjMGLQUbTcmi2fTI627sSHyaWz9u5gCM8NelDvbssvZQnyKZVHCj7DE6tLtXrjfBgIeH1RK5GDkvLJ0rWtS_T_f82cZaTbXp-cJQRMFEVZDfC-JGKUiXfx6HRj/s1600/p7PM_dark_south.png); background-repeat: no-repeat; background-position: right center; } #p7menubar li { float: left; width: 9em; } /*IE5 Mac OS 9 workaround*/ #p7menubar li {position: relative;} /* hide from IE mac \*/ #p7menubar li {position: static; width: auto;} /* end hiding from IE5 mac */ #p7menubar li ul, #p7menubar ul li { width: 12em; } #p7menubar ul li a { color: #565656; border-right: 0; padding: 3px 12px 3px 16px; } #p7menubar li ul { position: absolute; display: none; background-color: #FFFFFF; border-right: 1px solid #333333; border-bottom: 1px solid #333333; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fbVI-cLV-JDouydzO2ciBZz1OJLjC8AIMm3RaB00ge5XEiimJOvBR9O9v_pN7XWRt3ydZiD92fp28P5766LTePlfNIWTkKQd37hnl7svWO4TwmShp2-Cum7Dr0X4-lZ3DMOKpjeNRJup/s1600/p7exp_mgrad.jpg); background-repeat: repeat-x; } #p7menubar li div { display: none; position: absolute; background-color: #FFFFFF; border-right: 1px solid #333333; border-bottom: 1px solid #333333; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fbVI-cLV-JDouydzO2ciBZz1OJLjC8AIMm3RaB00ge5XEiimJOvBR9O9v_pN7XWRt3ydZiD92fp28P5766LTePlfNIWTkKQd37hnl7svWO4TwmShp2-Cum7Dr0X4-lZ3DMOKpjeNRJup/s1600/p7exp_mgrad.jpg); background-repeat: repeat-x; } #p7menubar li:hover a, #p7menubar a:focus, #p7menubar a:active, #p7menubar li.p7hvr a { color: #000000; background-color: #C19674; } #p7menubar li:hover ul, #p7menubar li.p7hvr ul { display: block; } #p7menubar li:hover div, #p7menubar li.p7hvr div { display: block; } #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a { color: #000000; background-color: transparent; } #p7menubar ul a:hover { background-color: #606060!important; color: #FFFFFF !important; } </style>

Tag HTML nya

<div class="container"> <div id="menuwrapper"> <ul id="p7menubar"> <li><a href="index.html">Home</a></li> <li><a class="trigger" href="#">Menu 1</a> <ul> <li><a href="#">Sub 1.1</a></li> <li><a href="#">Sub 1.2</a></li> <li><a href="#">Sub 1.3</a></li> <li><a href="#">Sub 1.4</a></li> </ul> </li> <li><a class="trigger" href="#">Menu 2</a> <ul> <li><a href="#">Sub 2.1</a></li> <li><a href="#">Sub 2.2</a></li> <li><a href="#">Sub 2.3</a></li> <li><a href="#">Sub 2.4</a></li> <li><a href="#">Sub 2.5</a></li> </ul> </li> <li><a class="trigger" href="#">Menu 3</a> <ul> <li><a href="#">Sub 3.1</a></li> <li><a href="#">Sub 3.2</a></li> <li><a href="#">Sub 3.3</a></li> <li><a href="#">Sub 3.4</a></li> <li><a href="#">Sub 3.5</a></li> <li><a href="#">Sub 3.6</a></li> <li><a href="#">Sub 3.7</a></li> <li><a href="#">Sub 3.8</a></li> </ul> </li> </ul> <br class="clearit"/> </div> </div>

File nya dapat dilihat hasilnya  dan dapat diunduh berikut ini :

Demo                                  Unduh