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+SQL 注入攻击的技术实现以及预防办法
Dec 29 PHP
PHP读取数据库并按照中文名称进行排序实现代码
Jan 29 PHP
getJSON跨域SyntaxError问题分析
Aug 07 PHP
php中base_convert()进制数字转换函数实例
Nov 20 PHP
php内存缓存实现方法
Jan 24 PHP
Yii2分页的使用及其扩展方法详解
May 23 PHP
关于php几种字符串连接的效率比较(详解)
Feb 22 PHP
php 类中的常量、静态属性、非静态属性的区别
Apr 09 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
May 12 PHP
php实现的二叉树遍历算法示例
Jun 15 PHP
PHP实现提取多维数组指定一列的方法总结
Dec 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
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP简单日历实现方法
2016/07/20 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
使用C++扩展Python的功能详解
2018/01/12 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
大学在校生求职信范文
2013/11/21 职场文书
总账会计岗位职责
2014/03/13 职场文书
煤矿安全协议书
2014/08/20 职场文书
研修心得体会
2014/09/04 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
发布会邀请函
2015/01/31 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL