php侧拉菜单 漂亮，可以向右或者向左展开，支持FF，IE_php实例

IE8必须增加子菜单，隐藏

 <BR><link href="../css/right_menu.css" rel="stylesheet" type="text/css"> <BR><DIV class="c_l"> <BR><DIV class="menu"> <BR><UL> <BR><?php <BR>mysql_select_db($database_lr, $lr); <BR>$query = mysql_query("SELECT * FROM bigclass order by sort"); <BR>while($row=mysql_fetch_array($query)) <BR>{ <BR>$bigclassid=$row['bigclassid']; <BR>$bigclassname_leftmenu=$row['bigclassname']; <BR>if ($htmlname==1){ <BR>$bigclass_htmlname_leftmenu=$bigclassname_leftmenu;//大类名称 <BR>$bigclass_htmlname_leftmenu=tihuan($bigclass_htmlname_leftmenu); <BR>} <BR>if ($htmlname==0){ <BR>$bigclass_htmlname_leftmenu=$bigclassid; <BR>} <BR>?> <BR><LI <?php <BR>//<!---ecms -ecms 判断是否有小类别--> <BR>mysql_select_db($database_lr, $lr); <BR>$query_num="select count(*) from smallclass where bigclassid='$bigclassid'"; <BR>$rs_num=mysql_query($query_num); <BR>$myrow_num = @mysql_fetch_array($rs_num); <BR>$smallclass_num=$myrow_num[0]; <BR>if ($smallclass_num>0){ <BR>echo "id=arrow"; <BR>} <BR>?>> <BR>" class="bigclasslink" > <?php echo $row['bigclassname']?><!---ecms -ecms [if IE 7]> -ecms -ecms ><!-ecms -ecms <![endif]--><!---ecms -ecms [if lte IE 6]><table><tr><td><![endif]--> <BR><?php <BR>mysql_select_db($database_lr, $lr); <BR>$query_small = mysql_query("SELECT * FROM smallclass where bigclassid='$bigclassid' order by sort"); <BR>if ($smallclass_num==0) <BR>{ <BR>echo "<ul><LI>href=> </LI></ul>"; <BR>} <BR>else <BR>{ <BR>?> <UL> <BR><?php <BR>while($rs=mysql_fetch_array($query_small)) <BR>{ <BR>$smallclassid_small_leftmenu=$rs['smallclassid']; <BR>$smallclassname_small=$rs['smallclassname'];//小类名称 <BR>if ($htmlname==1){ <BR>$smallclass_htmlname=$smallclassname_small; <BR>$smallclass_ht<i>·本2文来源gaodai$ma#com搞$代*码网2</i><strong>搞gaodaima代码</strong>mlname= tihuan($smallclass_htmlname); <BR>} <BR>if ($htmlname==0){ <BR>$smallclass_htmlname=$smallclassid_small_leftmenu; <BR>} <BR>?> <BR><LI class="b_top"> <BR>" class="smallclasslink"><?php echo $rs['smallclassname']?> <BR><!---ecms -ecms [if lte IE 6.5]><![endif]--> <BR></LI> <BR><?php <BR>} <BR>?> <BR></UL> <BR><?php }?> <BR><!---ecms -ecms [if lte IE 6]></td></tr></table><![endif]--></LI> <BR><?php <BR>} ?> <BR></UL> <BR></DIV></DIV> <BR>

CSS文件

 <BR>UL { <BR>PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none <BR>} <BR>LI { <BR>PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none <BR>} <BR>.c_l { <BR>FLOAT: left; WIDTH: 200px; background:url(../images/right_menu_bg.jpg); <BR>} <BR>.menu { <BR>Z-INDEX: 9999; MARGIN-BOTTOM: 10px; WIDTH: 198px; <BR>} <BR>.menu LI { <BR>FONT-WEIGHT: bold;FLOAT: left; WIDTH: 198px; LINE-HEIGHT: 26px; HEIGHT: 26px ; <BR>/* <BR>BACKGROUND: url(../images/line01.gif) repeat-x 50% bottom; <BR>*/ <BR>} <BR>.menu LI A { <BR>LINE-HEIGHT: 26px; HEIGHT: 26px ; <BR>/* <BR>BACKGROUND: url(../images/line01.gif) repeat-x 50% bottom; <BR>*/ <BR>} <BR>#arrow{ <BR>BACKGROUND: url(../images/aw02.gif) no-repeat 185px 10px; <BR>LINE-HEIGHT: 26px; HEIGHT: 26px ; <BR>} <BR>.menu LI A:hover { <BR>BACKGROUND: #eeeeee; LINE-HEIGHT: 26px; POSITION: relative; HEIGHT: 26px <BR>} <BR>.menu UL UL { <BR>Z-INDEX: 9999; right: 185px; POSITION: absolute; TOP: -10000000px;background:url(../images/right_menu_bg.jpg);/*smallclass right kongzhi celafangxiang*/ <BR>} <BR>.menu UL UL LI { <BR>DISPLAY: block; FONT-WEIGHT: normal; BACKGROUND: url(../images/aw02.gif) no-repeat 10px 10px; LINE-HEIGHT: 25px! important; TOP: 0px! important; HEIGHT: 25px! important <BR>} <BR>.menu UL UL .b_top { <BR>BORDER-LEFT-WIDTH: 0px; WIDTH: 199px; <BR>} <BR>.menu UL UL .b_top A { <BR>DISPLAY: block <BR>} <BR>.menu A { <BR>PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 198px; TEXT-INDENT: 18px; PADDING-TOP: 0px; TEXT-DECORATION: none <BR>} <BR>.menu A:visited { <BR>PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 198px; TEXT-INDENT: 18px; PADDING-TOP: 0px; TEXT-DECORATION: none <BR>} <BR>.menu UL UL LI A { <BR>DISPLAY: block; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #000; TOP: 0px! important; HEIGHT: 25px! important <BR>} <BR>.menu UL UL LI A:visited { <BR>DISPLAY: block; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #000; TOP: 0px! important; HEIGHT: 25px! important <BR>} <BR>.menu UL UL LI A:hover { <BR>DISPLAY: block; BACKGROUND: url(../images/aw02.gif) #eee no-repeat 10px 10px; WIDTH: 198px; COLOR: #d15400; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; TOP: 0px! important; HEIGHT: 25px! important; BORDER-BOTTOM-STYLE: none <BR>} <BR>.menu TABLE { <BR>PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 0px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse; HEIGHT: 0px <BR>} <BR>* HTML .menu A:hover { <BR>POSITION: relative <BR>} <BR>.menu LI:hover { <BR>POSITION: relative <BR>} <BR>.menu UL :hover UL { <BR>TOP: -1px <BR>} <BR>.menu UL LI:hover > A { <BR>BACKGROUND: #eee; POSITION: relative; TEXT-DECORATION: none <BR>} <BR>.menu UL LI UL LI:hover > A { <BR>BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: relative; TOP: 0px; BORDER-BOTTOM-STYLE: none <BR>} <BR>

其中menu UL UL的left或者right控制向右或者向左显示子菜单

喜欢 (0)赏

[搞代码]

分享 (0)