垂直二级导航菜单.jQuery前端框架技术

最新推荐文章于 2021-08-06 10:30:55 发布

剪短发会上瘾w

最新推荐文章于 2021-08-06 10:30:55 发布

阅读量376

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/wq6ylc88/article/details/110118355

版权

在页面表单中，分别展示某类产品的全部子类项，当用户将鼠标移动某子类时，所选子类样式发生变化，并在该子类的右边以浮动的形式展示该类的全部产品：当用户将鼠标移除某子类时，所选子类样式恢复到初始值，同时，隐藏已显示的全部子类产品。

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>列表中的导航菜单应用</title>
    <script type="text/javascript"
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript"
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{
   font-size:13px}
           ul,li{
   list-style-type:none;padding:0px;margin:0px}
           .menu{
   width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
           .optn{
   width:190px;line-height:28px;border-top:dashed 1px #ccc}
           .content{
   padding-top:10px;clear:left}
           a{
   text-decoration:none;color:#666;padding:10px}
           .optnFocus{
   background-color:#fff;font-weight:bold}
           div{
   padding:10px}
           div img{
   float:left;padding-right:6px}
           span{
   padding-top:3px;font-size:14px;font-weight:bold;float:left}
           .tip{
   width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
                background-color:#fff;display:none}
           .tip li{
   line-height:23px;}
           #sort{
   position:absolute;display:none}
    </style

最低0.47元/天解锁文章

剪短发会上瘾w

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
垂直二级导航菜单.jQuery前端框架技术

在页面表单中，分别展示某类产品的全部子类项，当用户将鼠标移动某子类时，所选子类样式发生变化，并在该子类的右边以浮动的形式展示该类的全部产品：当用户将鼠标移除某子类时，所选子类样式恢复到初始值，同时，隐藏已显示的全部子类产品。实现代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x
复制链接

扫一扫