有关一个导航菜单的实现,该如何解决

2012-05-16

有关一个导航菜单的实现像这种导航栏要怎么实现?用图片还是CSS就可以实现了?求解答,最好有实现例子提供下

有关一个导航菜单的实现

像这种导航栏要怎么实现?用图片还是CSS就可以实现了?
求解答,最好有实现例子提供下载

[解决办法]

HTML code

  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="eaglelink" prefix="eaglelink"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>   .menu1{background:#308EF8};</style><script language="javascript"    src="<eaglelink:contextpath/>/html/js/jquery-1.3.2.min.js"></script><script language="javascript">//初始化时让菜单二层全部隐藏$(document).ready(function(){     $(".menu1").siblings().hide();});</script></head><body><table width="900" border="0" cellspacing="0" cellpadding="0">  <tr>  <td width="260" height="600" valign="top" bgcolor="#FFE4E1"><table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>  <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr class="menu1">  <td><div align="center">菜单１</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>  </tr>  </table></td>  </tr>  <tr>  <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr class="menu1">  <td><div align="center">菜单2</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>  </tr>  </table></td>  </tr>  <tr>  <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr class="menu1">  <td><div align="center">菜单3</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>  </tr>  </table></td>  </tr>  <tr>  <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr class="menu1">  <td><div align="center">菜单4</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>  </tr>  <tr>  <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>  </tr>  </table></td>  </tr>  <tr>  <td colspan="2">&nbsp;</td>  </tr>  <tr>  <td colspan="2">&nbsp;</td>  </tr>          </table></td>  <td>&nbsp;</td>  </tr></table><script language="javascript">//控制菜单选项显示和隐藏$(".menu1").click(function(){$(this).siblings().show();$(".menu1").not($(this)).siblings().hide();});</script></body></html> 
 
[解决办法]
CSS code#abg_left {width:220px ;height:550px;float:left;padding:70px 0 15px 0;border-radius: 5px 5px 0px 0px;background:url(../Images/abg_leftbg.png);}#abg_left #mid {width:180px ;height:100%;margin: 0 0 0 20 ;border-radius: 10px;background:url(../Images/abg_leftc.png);}#menu_tab {width:180px ;border:0;margin-bottom: 20px ;}#mid .child {width:150px ;border:0;display:none;}#mid .bgmenu {padding-left:40px;background:url(../Images/abg_menu.png);}#mid .bgmenu .menuParent {color: #D000DC;font-size:14px;font-weight: bold}#mid .submenu {width:150px ;height:30px;background:url(../Images/abg_submenu.png);}#mid .submenu .menuChild { color: #6B6B6B;font-size:14px;}#mid .submenu td {width:150px ;height:30px;padding-left:40px;}

热点排行

Java Web开发

有关一个导航菜单的实现,该如何解决