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 相关文章推荐
PHP4实际应用经验篇(4)
Oct 09 PHP
ThinkPHP自动验证失败的解决方法
Jun 09 PHP
PHP时间戳 strtotime()使用方法和技巧
Oct 29 PHP
php的一个简单加密解密代码
Jan 14 PHP
php实现的mongodb操作类实例
Apr 03 PHP
PHP实现删除字符串中任何字符的函数
Aug 11 PHP
php rsa 加密,解密,签名,验签详解
Dec 06 PHP
yii2 数据库读写分离配置示例
Feb 10 PHP
PHP给前端返回一个JSON对象的实例讲解
May 31 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
Nov 29 PHP
java解析json方法总结
May 16 PHP
七种PHP开发环境搭建工具
Jun 28 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开发者的10个技巧
2011/02/25 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
js工具方法弹出蒙版
2013/05/08 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JS作用域链详解
2017/06/26 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue调用语音播放的方法
2019/09/27 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python如何建立全零数组
2020/07/19 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
实习生岗位职责
2014/04/12 职场文书
应届生自荐书
2014/06/23 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技