CSS 边栏菜单

最新推荐文章于 2024-09-14 17:04:32 发布
最新推荐文章于 2024-09-14 17:04:32 发布
阅读量542 收藏
点赞数
分类专栏： Web 文章标签： css function 产品 float xhtml html

 <!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" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>css菜单演示</title>
    <style type="text/css">
        <!--
        *
        {
            margin: 0;
            padding: 0;
            border: 0;
        }
        body
        {
            font-family: arial, 宋体, serif;
            font-size: 12px;
        }
        #nav
        {
            line-height: 24px;
            list-style-type: none;
            background: #666;
            width: 80px;
        }
        #nav a
        {
            display: block;
            width: 80px;
            text-align: center;
        }
        #nav a:link
        {
            color: #666;
            text-decoration: none;
        }
        #nav a:visited
        {
            color: #666;
            text-decoration: none;
        }
        #nav a:hover
        {
            color: #FFF;
            text-decoration: none;
            font-weight: bold;
        }
        #nav li
        {
            /*float: left*/ ;width:80px;background:#CCC;
        }
        #nav li a:hover
        {
            background: #999;
        }
        #nav li ul
        {
            line-height: 27px;
            list-style-type: none;
            text-align: left;
            left: -999em;
            width: 180px;
            position: absolute;
        }
        #nav li ul li
        {
            float: left;
            width: 180px;
            background: #F6F6F6;
        }
        #nav li ul a
        {
            display: block;
            width: 180px;
            width:156px;text-align:left;padding-left:24px;
        }
        #nav li ul a:link
        {
            color: #666;
            text-decoration: none;
        }
        #nav li ul a:visited
        {
            color: #666;
            text-decoration: none;
        }
        #nav li ul a:hover
        {
            color: #F3F3F3;
            text-decoration: none;
            font-weight: normal;
            background: #999;
        }
        #nav li:hover ul
        {
            left: auto;
        }
        #nav li.sfhover ul
        {
            left: auto;
        }
        #nav li.sfhover a
        {
            float: left;
        }
        #content
        {
            clear: left;
        }
        -->
    </style>

    <script type="text/javascript"><!--//--><![CDATA[//><!--
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].οnmοuseοver=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].οnmοuseοut=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"),

"");
  }
 }
}
window.οnlοad=menuFix;

//--><!]]></script>

</head>
<body>
    <ul id="nav">
        <li><a href="#">产品介绍</a>
            <ul>
                <li><a href="#">产品一</a></li>
                <li><a href="#">产品一</a></li>
                <li><a href="#">产品一</a></li>
                <li><a href="#">产品一</a></li>
                <li><a href="#">产品一</a></li>
                <li><a href="#">产品一</a></li>
            </ul>
        </li>
        <li><a href="#">服务介绍</a>
            <ul>
                <li><a href="#">服务二</a></li>
                <li><a href="#">服务二</a></li>
                <li><a href="#">服务二</a></li>
                <li><a href="#">服务二服务二</a></li>
                <li><a href="#">服务二服务二服务二</a></li>
                <li><a href="#">服务二</a></li>
            </ul>
        </li>
        <li><a href="#">成功案例</a>
            <ul>
                <li><a href="#">案例三</a></li>
                <li><a href="#">案例</a></li>
                <li><a href="#">案例三案例三</a></li>
                <li><a href="#">案例三案例三案例三</a></li>
            </ul>
        </li>
        <li><a href="#">关于我们</a>
            <ul>
                <li><a href="#">我们四</a></li>
                <li><a href="#">我们四</a></li>
                <li><a href="#">我们四</a></li>
                <li><a href="#">我们四111</a></li>
            </ul>
        </li>
        <li><a href="#">在线演示</a>
            <ul>
                <li><a href="#">演示</a></li>
                <li><a href="#">演示</a></li>
                <li><a href="#">演示</a></li>
                <li><a href="#">演示演示演示</a></li>
                <li><a href="#">演示演示演示</a></li>
                <li><a href="#">演示演示</a></li>
                <li><a href="#">演示演示演示</a></li>
                <li><a href="#">演示演示演示演示演示</a></li>
            </ul>
        </li>
        <li><a href="#">联系我们</a>
            <ul>
                <li><a href="#">联系联系联系联系联系</a></li>
                <li><a href="#">联系联系联系</a></li>
                <li><a href="#">联系</a></li>
                <li><a href="#">联系联系</a></li>
                <li><a href="#">联系联系</a></li>
                <li><a href="#">联系联系联系</a></li>
                <li><a href="#">联系联系联系</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

qiume
关注
专栏目录
CSS菜单栏制作
shaonian1996
02-14 6439
1 纵向菜单：html:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;布局&lt;/title&gt; &lt;script type="text/javascript" src="demo.js"&
CSS实现的几款不错的菜单栏
逐梦小涛
02-06 1144
前言      自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！ 一、滑动菜单 1、代码： 1 D
一些简单的样式问题
weixin_30544657的博客
07-09 63
1、鼠标的动作改变样式 onmouseover，onmouseout直接定义样式：onmouseover="this.style.backgroundColor='#ff0000'" onmouseout="this.style.backgroundColor='#ffffff'"使用定义好的css:onmouseover="this.className='style1'" onmouseou...
CSS打造漂亮按钮
北一
07-12 463
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 用CSS实现的几个非
鼠标悬停或者点击时改变背景
xyc20080413的专栏
02-03 250
onmouseover="this.className='over'" onmouseout="this.className='out'" 
CSS打造经典鼠标触发显示选项（做搜索找工作用得到）
lampsunny的专栏
04-09 811
css打造鼠标触发效果 <!-- body { margin: 0; padding: 0; color: #000; font-size: 12px; line-height: 160%; text-align: left; height: 100%; font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Luc
this.className的使用
after_you的博客
12-22 5653
onmouseover与onmouseout事件处理器，分别对应为鼠标移上去和鼠标移开时触发。 onmouseover="this.className='menu_title2';"是鼠标移到该单元格上去时应用的css样式为“.menu_title2”的样式 onmouseout="this.className='menu_title';"是鼠标离开单元格后应用的css样式为“.menu_
9种html5+css3隐藏侧边栏导航菜单动画效果
10-04
`<nav>`元素特别适合用来定义网站的主要导航部分，而`<section>`和`<article>`则可以帮助我们组织内容，使侧边栏菜单与页面其他部分保持良好的语义关系。 在CSS3方面，我们主要会用到以下几个关键特性： 1. **...
9种html5+css3隐藏侧边栏导航菜单动画效果.rar
04-10
3. **CSS3动画**：在这些隐藏侧边栏菜单中，可能运用了CSS3的`transform`属性，它可以改变元素的大小、位置和形状，比如通过`translateX()`实现菜单的滑动效果。`opacity`属性可以控制元素的透明度，创造出淡入淡出...
简洁时尚的jQuery和CSS3侧边栏菜单插件.rar
06-23
简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件...
侧边栏菜单 纯css
07-03
纯CSS的侧边栏菜单是指不依赖JavaScript或者其他编程语言，仅通过CSS（层叠样式表）来实现菜单的展示、交互效果和布局。这种菜单设计方式具有响应性好、性能高效以及易于维护的优点。以下将详细介绍纯CSS侧边栏菜单...
简洁时尚的jQuery和CSS3侧边栏菜单插件
05-15
标题中的“简洁时尚的jQuery和CSS3侧边栏菜单插件”揭示了我们要讨论的核心技术：jQuery和CSS3，以及它们在创建一个高效且视觉吸引力强的侧边栏菜单中的应用。这种类型的菜单通常用于现代网页设计，尤其适用于响应式...
CSS——弹性盒子布局（display: flex）
懒羊羊大王的博客
09-14 995
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
基于less和scss 循环生成css
最新发布
k0933的博客
09-14 200
【代码】基于less 循环生成css。
css总结（记录一下...）
tzz_1122的博客
09-11 326
text-stroke-color:设置文字边界填充颜色。text-fill-color:设置文字内部填充颜色。text-stroke-width:设置文字边界宽度。ellipsis:显示省略符号来代表被修剪的文本。break-word:允许在单词内换行。normal:使用浏览器默认的换行。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 533
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 652
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
CSS基本语法结构
nice66660的博客
09-10 1304
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 330
【代码】css鼠标移动过去变成手的图标。
纯css实现隐藏侧边栏菜单
06-06
可以使用CSS中的transform属性来实现隐藏侧边栏菜单。具体实现代码如下： HTML结构： ```html <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值