php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE


Posted in PHP onOctober 15, 2009

php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
IE8必须增加子菜单,隐藏

<link href="../css/right_menu.css" rel="stylesheet" type="text/css"> 
<DIV class=c_l> 
<DIV class=menu> 
<UL> 
<?php 
mysql_select_db($database_lr, $lr); 
$query = mysql_query("SELECT * FROM bigclass order by sort"); 
while($row=mysql_fetch_array($query)) 
{ 
$bigclassid=$row['bigclassid']; 
$bigclassname_leftmenu=$row['bigclassname']; 
if ($htmlname==1){ 
$bigclass_htmlname_leftmenu=$bigclassname_leftmenu;//大类名称 
$bigclass_htmlname_leftmenu=tihuan($bigclass_htmlname_leftmenu); 
} 
if ($htmlname==0){ 
$bigclass_htmlname_leftmenu=$bigclassid; 
} 
?> 
<LI <?php 
//<!--判断是否有小类别--> 
mysql_select_db($database_lr, $lr); 
$query_num="select count(*) from smallclass where bigclassid='$bigclassid'"; 
$rs_num=mysql_query($query_num); 
$myrow_num = @mysql_fetch_array($rs_num); 
$smallclass_num=$myrow_num[0]; 
if ($smallclass_num>0){ 
echo "id=arrow"; 
} 
?>> 
<a href="<?php echo "../".$htmlcatalogue."".$bigclass_htmlname_leftmenu.".html"?>" class="bigclasslink" > <?php echo $row['bigclassname']?><!--[if IE 7]> <!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> 
<?php 
mysql_select_db($database_lr, $lr); 
$query_small = mysql_query("SELECT * FROM smallclass where bigclassid='$bigclassid' order by sort"); 
if ($smallclass_num==0) 
{ 
echo "<ul style='display:none'><LI><A title= 
href=></A> </LI></ul>"; 
} 
else 
{ 
?> <UL> 
<?php 
while($rs=mysql_fetch_array($query_small)) 
{ 
$smallclassid_small_leftmenu=$rs['smallclassid']; 
$smallclassname_small=$rs['smallclassname'];//小类名称 
if ($htmlname==1){ 
$smallclass_htmlname=$smallclassname_small; 
$smallclass_htmlname= tihuan($smallclass_htmlname); 
} 
if ($htmlname==0){ 
$smallclass_htmlname=$smallclassid_small_leftmenu; 
} 
?> 
<LI class=b_top> 
<a href="<?php echo "../".$htmlcatalogue."".$bigclass_htmlname_leftmenu."_".$smallclass_htmlname."_page_1.html"?>" class="smallclasslink"><?php echo $rs['smallclassname']?></a> 
<!--[if lte IE 6.5]><![endif]--> 
</LI> 
<?php 
} 
?> 
</UL> 
<?php }?> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI> 
<?php 
} ?> 
</UL> 
</DIV></DIV>

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

其中menu UL UL的left或者right控制向右或者向左显示子菜单
PHP 相关文章推荐
基于数据库的在线人数,日访问量等统计
Oct 09 PHP
php对象和数组相互转换的方法
May 12 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
Jul 04 PHP
详解PHP实现异步调用的4种方法
Mar 14 PHP
ThinkPHP连接Oracle数据库
Apr 22 PHP
自制PHP框架之路由与控制器
May 07 PHP
详解php伪造Referer请求反盗链资源
Jan 24 PHP
Laravel开启跨域请求的方法
Oct 13 PHP
PHP PDO和消息队列的个人理解与应用实例分析
Nov 25 PHP
PHP高并发和大流量解决方案整理
Dec 24 PHP
PHP pthreads v3下worker和pool的使用方法示例
Feb 21 PHP
PHP实现递归的三种方法
Jul 04 PHP
php 数学运算验证码实现代码
Oct 11 #PHP
用mysql触发器自动更新memcache的实现代码
Oct 11 #PHP
基于OpenCV的PHP图像人脸识别技术
Oct 11 #PHP
PHP 身份验证方面的函数
Oct 11 #PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
Oct 11 #PHP
关于页面优化和伪静态
Oct 11 #PHP
PHP iconv 函数转gb2312的bug解决方法
Oct 11 #PHP
You might like
MYSQL数据库初学者使用指南
2006/11/16 PHP
php array_search() 函数使用
2010/04/13 PHP
使用php清除bom示例
2014/03/03 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
javascript的this关键字详解
2019/05/20 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
岗位职责的含义
2013/11/17 职场文书
遗嘱继承公证书
2014/04/09 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers