主站经典论坛家园作品品网维基桌面聚合

经典论坛 » WEB标准化专栏 » 请教高手关于这个菜单

‹‹ 上一主题 | 下一主题 ››

发新话题

打印

[求助] 请教高手关于这个菜单

melody831 [楼主]

新手上路

帖子: 44
体力: 37
威望: 0
当前: 天津南开
离线: 9 天

1^# 大中小发表于 2007-11-28 12:19

请教高手关于这个菜单~我做的是和淘宝一摸一样的菜单~在ff下没有问题但是在ie6下~点击之后左半部分橘红色图片就是显示不出来~似乎设置的左边对内补-16px没有起作用~怎么回事呢？
由于这是头文件所以走形就不考虑了调用以后就没问题了~只是ie6下左半部分橘红色图片不显示55

<style>
/* 最外层 */
#ChannelMenu {
	CLEAR: both;
	OVERFLOW: hidden;
	width: 945px;
	margin: auto;
	background-color: transparent;
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	
	background-repeat: repeat-x;
	background-position: 0px -328px;
}
/* 上级菜单 */
#ChannelMenuItems {
	MARGIN: auto;
	OVERFLOW: hidden;
	WIDTH: 820px;
	background-color: transparent;
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-repeat: no-repeat;
	background-position: -1px -108px;
}
#ChannelMenuItems LI {
	FLOAT: left;
	background-color: transparent;
	HEIGHT: 33px;
	margin:0;
	
	display: inline;
}
/* 下级菜单 */
#ChannelMenuItems LI#MenuInfo {
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat right -141px}
#ChannelMenuItems LI#MenuInfo UL {
	OVERFLOW: hidden;
	HEIGHT: 29px;
	padding: 4px 3px 0px 0px;
}
#ChannelMenuItems LI#MenuInfo LI {
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat left -510px
}
/* 上级菜单通用 */
#ChannelMenuItems A{
	DISPLAY: block;
		background-color:transparent ;
	FLOAT: left;
	HEIGHT: 33px;
	TEXT-DECORATION: none;
	margin: 0px 0px 0px -16px;
	padding: 0px 0px 0px 14px;
	color: #111;
	 
}
#ChannelMenuItems A:hover {
	color: #f70;
		background-color:transparent ;
}
#ChannelMenuItems A SPAN {
	DISPLAY: block;
	FONT-SIZE: 12px;
	background-color:transparent ;
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat right -75px;
	FLOAT: left;
	CURSOR: pointer;
	FONT-STYLE: normal;
	HEIGHT: 20px;
	TEXT-ALIGN: center;
	padding-top: 12px;
	padding-right: 22px;
	padding-bottom: 1px;
	padding-left: 8px;
}
/* 下级菜单通用 */
#ChannelMenuItems LI#MenuInfo LI A {
	HEIGHT: 30px !important;
	BACKGROUND: none transparent scroll repeat 0% 0%;
}
#ChannelMenuItems LI#MenuInfo LI A SPAN {
	BACKGROUND: none transparent scroll repeat 0% 0%;
	HEIGHT: 21px !important;
	padding: 8px 8px 1px 9px;
}
/*下级菜单第一位*/
#ChannelMenuItems LI#MenuInfo LI.m_first {
	BACKGROUND: none transparent scroll repeat 0% 0%;
}
#ChannelMenuItems LI#MenuInfo LI.m_first A SPAN {
	PADDING-LEFT: 3px;
	BACKGROUND: none transparent scroll repeat 0% 0%
}
/*上级菜单第一位*/
/*上级菜单选中位*/
#ChannelMenuItems LI.c_selectde A {
	PADDING-LEFT: 12px;
	margin: 0px 0px 0px -20px !important;
		background-color: transparent;
	z-index: 10;
	position: relative;
}
#ChannelMenuItems LI.c_selectde A SPAN {
	FONT-SIZE: 12px;
	padding: 10px 24px 3px 7px;
	margin-right: 0px;
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
		background-color: transparent;
	background-repeat: no-repeat;
	background-position: right -75px;
	font-style: normal;
}*/
/* searchbox */
#SearchBox {
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat 0px -208px;
	WIDTH: 100%;
	POSITION: relative;
	HEIGHT: 60px;
	bottom: 3px;
}
	#SearchInnerBox {
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat right -428px;
	POSITION: relative;
	HEIGHT: 100%;
	}
		#SearchHome {
	POSITION: relative;
	HEIGHT: 58px;
	top: 8px;
	left: 30px;
		}
#searchbox input,#searchbox select {
	vertical-align: middle;
}
#searchbox select {
	height: 22px;
}
#ww {
	font: 12px/17px;
	width: 70px;
	letter-spacing: 0.7em;
}
#ee {
	width: 200px;
}
#rr {
	width: 25%;
}
#SearchForm a {
	color: #FEDEAF;
}
/* searchbox over */
#ChannelMenuItems #tag1 .selectli1 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: left -42px;
	color: #FFFFFF;
	text-decoration: none;
	padding-left: 15px;
	background-repeat: no-repeat;
}
#ChannelMenuItems #tag1 .selectli1 .selectspan1 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: right -42px;
	padding-top: 10px;
	padding-right: 24px;
	padding-bottom: 3px;
	padding-left: 7px;	
}
#ChannelMenuItems #tag2 .selectli2,#ChannelMenuItems #tag3 .selectli3,#ChannelMenuItems #tag4 .selectli4,#ChannelMenuItems #tag5 .selectli5,#ChannelMenuItems #tag6 .selectli6 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: left -75px;
	color: #FFFFFF;
	_float:left;
	_display:block;
	text-decoration: none;
	padding-left: 15px;
	background-repeat: no-repeat;
}
#ChannelMenuItems #tag2 .selectli2 .selectspan2,#ChannelMenuItems #tag3 .selectli3 .selectspan3,#ChannelMenuItems #tag4 .selectli4 .selectspan4,#ChannelMenuItems #tag5 .selectli5 .selectspan5,#ChannelMenuItems #tag6 .selectli6 .selectspan6 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: right -42px;
	padding-top: 10px;
	padding-right: 24px;
	padding-bottom: 3px;
	padding-left: 7px;	
}
</style>
<link href="css/ChannelMenu.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function switchTag(tag,content)
{
//	alert(tag);
//	alert(content);
	for(i=1; i <14; i++)
	{
		if ("tag"+i==tag)
		{
			document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
			document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
		}else{
			document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
			document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
		}
		if ("content"+i==content)
		{
			document.getElementById(content).className="";
		}else{
			document.getElementById("content"+i).className="hidecontent";
		}
		document.getElementById("content").className=content;
	}
}
//切换搜索类别目录
function changeurl(str){
	$.get('<smart> $site_url </smart>/home/index.php',
			{action:'aj_get_class',search_type:str},
			function(data){
				$('#span_search_cate').html(data);
			}
		);
}
//提交表单，确定搜索路径
function search_submit(){
	var search_form = document.forms['form_search_nav'];
	if(document.getElementById('searchtype').value == 'product'){
		search_form.action='product.php?action=list';  
	 }else if (document.getElementById('searchtype').value == 'shop'){
	 	search_form.action='shop.php?action=list&slcShopClass='+document.getElementById('searchcate').value;  
	 }else{
	 	return false;
	 }
    search_form.method='POST';   
    search_form.submit(); 
}
</script>
<div id="ChannelMenu">
  <ul id="ChannelMenuItems">
    <li id="tag1" > <a href="" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"style="margin:0px"><span class="selectspan1">首页</span></a> </li>
    <li id="tag2"> <a href="" onclick="switchTag('tag2','content2');this.blur();"><span>品牌商店</span></a> </li>
    <li id="tag3"> <a href="" onclick="switchTag('tag3','content3');this.blur();"><span>宝贝类目</span></a> </li>
    <li id="tag4"> <a href="" onclick="switchTag('tag4','content4');this.blur();" target="_top"><span>二手集市</span></a> </li>
    <li id="tag5"> <a href="" onclick="switchTag('tag5','content5');this.blur();"target="_top"><span>闲置物品</span></a> </li>
    <li id="tag6"> <a href="" onclick="switchTag('tag6','content6');this.blur();" target="_top"><span>淘宝社区</span></a> </li>
    
    <li id="MenuInfo">
      <ul>
        <li id="tag7" class="m_first"> <a href="product.php?action=list&pcid=3" onclick="switchTag('tag7','content7');this.blur();" target="_top"><span>手机</span></a> </li>
        <li id="tag8"> <a href="product.php?action=list&pcid=33" onclick="switchTag('tag8','content8');this.blur();" target="_top"><span>女人</span></a> </li>
        <li id="tag9"> <a href="product.php?action=list&pcid=35" onclick="switchTag('tag9','content9');this.blur();"target="_top"><span>男人</span></a> </li>
        <li id="tag10"> <a href="product.php?action=list&pcid=12" onclick="switchTag('tag10','content10');this.blur();" target="_top"><span>运动</span></a> </li>
        <li id="tag11"> <a href="product.php?action=list&pcid=17" onclick="switchTag('tag11','content11');this.blur();" target="_top"><span>家居</span></a> </li>
        <li id="tag12"> <a href="product.php?action=list&pcid=38" onclick="switchTag('tag12','content12');this.blur();" target="_top"><span>母婴</span></a> </li>
        <li id="tag13"> <a href="product.php?action=list&pcid=16" onclick="switchTag('tag13','content13');this.blur();" target="_top"><span>游戏</span></a> </li>
        <li id="tag14"> <a href="product.php?action=list&pcid=42" onclick="switchTag('tag14','content14');this.blur();" target="_top"><span>宠物</span></a> </li>
      </ul>
    </li>
  </ul>
  <div id="content" class="content1">
    <div id="content1"></div>
    <div id="content2" class="hidecontent"></div>
    <div id="content3" class="hidecontent"></div>
    <div id="content4" class="hidecontent"></div>
    <div id="content5" class="hidecontent"></div>
  </div>
  <div id="SearchBox">
    <div id="SearchInnerBox">
      <div id="SearchHome">
        <div id="SearchForm">
          <form method="get" name="form_search_nav" id="form_search_nav" onsubmit="search_submit();">
            
            <select name="searchtype" id="searchtype" onchange="changeurl(this.value)">
              <option value="product" selected="selected">搜索宝贝</option>
              <option value="shop">搜索店铺</option>
              
            </select>
            <input name="keyword" type="text" id="rr" />
            <span id="span_search_cate"><smart> $search_cate </smart></span>
            <input name="ww" type="submit" id="ww" value="搜索" />
            <a href="product.php?action=search">[ 高级搜索 ]</a>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

提示：您可以先修改部分代码再运行

[ 本帖最后由 melody831 于 2007-11-28 12:28 编辑 ]

TOP

西部数码VPS主机1G内存仅266元

melody831 [楼主]

新手上路

帖子: 44
体力: 37
威望: 0
当前: 天津南开
离线: 9 天

2^# 大中小发表于 2007-11-28 14:24

不要考虑变形这是头文件调用以后就没事了就是左边的橘红色图片不显示！55555555555555555555555555555

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

‹‹ 上一主题 | 下一主题 ››

发新话题