有时，一个网站的导航菜单文字不能提供足够的信息，来表达当前菜单按钮的内容，一般的解决办法是使用提示信息ToolTip，那么本文介绍的流动导航菜单也可以解决此问题。
<html>
<style type="text/css">
#menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
#menuBarHolder ul{ list-style-type:none; display:block;}
.firstchild { border-left:1px solid #ccc;}
#container { margin-top:100px;}
#menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}
.menuHover { background-color:#999;}
.menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:-15px;
-moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px;
border-radius-bottomright: 5px;border-radius-bottomleft: 5px;
}
h1 {
font: 50px normal Georgia, 'Times New Roman', Times, serif;
color: #111;
margin: 0;
text-align: center;
padding: 5px 0;
}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
</style>
<style type="text/css">
#menuBar li a{width:50px;}
.menuInfo { margin-left:-65px; width:80px;}
</style>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#menuBar li').click(function()
{
var url = $(this).find('a').attr('href');
document.location.href = url;
});
$('#menuBar li').hover(function()
{
$(this).find('.menuInfo').slideDown();
},
function()
{
$(this).find('.menuInfo').slideUp();
});
});
</script>
<center>
<div id="container">
<h1>Fluid Navigation<br />CSS & jQuery <small>Tutorial by Addy Osmani</small></h1>
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild"><a href="javascript:#">Home</a><div class="menuInfo">I am some text about the home section</div></li>
<li><a href="javascript:#">Services</a><div class="menuInfo">I am some text about the services section</div></li>
<li><a href="javascript:#">Clients</a><div class="menuInfo">I am some text about the clients section</div></li>
<li><a href="javascript:#">Portfolio</a><div class="menuInfo">I am some text about the portfolio section</div></li>
<li><a href="javascript:#">About</a><div class="menuInfo">I am some text about the about section</div></li>
<li><a href="javascript:#">Blog</a><div class="menuInfo">I am some text about the blog section</div></li>
<li><a href="javascript:#">Follow</a><div class="menuInfo">I am some text about the follow section</div></li>
<li><a href="javascript:#">Contact</a><div class="menuInfo">I am some text about the contact section</div></li>
</ul>
</div>
</div>
</center>
</html>
效果图：
分享到：
相关推荐
通过使用百分比单位和媒体查询，我们可以创建一个流动的导航菜单，使其在不同设备上都能优雅地展示。 在实际开发过程中，我们通常会有一个HTML文件作为起点，例如这里的`fluid-menu.html`。在这个文件中，我们将...
以下是一个简单的示例，展示如何使用 jQuery 实现熔岩灯导航菜单特效： ```html <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a>...
在本案例中，我们讨论的是一个使用jQuery实现的“熔岩灯”导航菜单动画效果，这在网页设计中是一种独特且吸引用户的交互方式。 “熔岩灯”导航菜单的概念源自于一种早期的电子设备，该设备的彩色灯光在不同颜色之间...
本文将深入探讨“jQuery CSS3导航菜单下划线动画特效”这一主题，该特效为导航菜单增加了视觉吸引力，提高了用户体验。 首先，jQuery是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画制作...
"jQuery熔岩灯导航菜单特效"是一个利用jQuery库实现的创新性菜单效果，旨在提升网站的视觉吸引力和用户体验。这个特效通过结合CSS样式和JavaScript动态效果，为传统导航菜单赋予了生动的动画表现。 首先，jQuery是...
在网页设计中，导航菜单是不可...综合这些文件，我们可以学习到如何结合HTML、CSS和jQuery创建不同类型的导航菜单，包括滑动、二级下拉、熔岩灯效果等，这些菜单设计不仅美观，而且具有良好的交互性，能提升用户体验。
jQuery熔岩灯导航菜单特效，源自于早期的电子游戏——“Lava Lamp”（熔岩灯），因其动态效果酷似熔岩在灯泡内流动而得名。在网页上，它表现为导航菜单项在鼠标悬停时，呈现出流动、变换的效果，为网站的导航部分...
以下是创建流动导航菜单的具体步骤和相关知识点： 首先，我们需要准备CSS样式来定义菜单的基本结构和行为。在CSS代码中，`menuBarHolder` 是菜单的固定容器，设置了宽度和背景色，确保菜单在页面上的位置和外观。`#...
gooey-menu插件的核心特点在于其液态融合效果，它将传统的导航菜单转化为具有流动感和立体感的环形设计。这种效果源于SVG（可缩放矢量图形）的过滤器功能，通过模糊、颜色混合等滤镜效果，使得菜单项在展开和收缩时...
在创建熔岩灯导航菜单时，jQuery的动画功能尤其关键，它可以平滑地改变导航元素的位置、颜色或透明度，模拟出熔岩流动的动态效果。 实现这种特效通常包括以下步骤： 1. **基础结构**：首先，需要设置一个包含导航项...
在实际项目中，jQuery Gooey Menu 可广泛应用于导航栏、侧边栏菜单等场景。例如，在电商网站中，它可以增加用户对商品分类的关注度；在博客或新闻网站上，它可以使用户更容易找到感兴趣的内容。 五、使用步骤 1. ...
在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一款引人注目的下划线动画导航特效。这种效果在用户鼠标点击导航时，会呈现出线性流动的视觉动态，为网站增添互动性和专业感。 首先，让我们了解jQuery。jQuery...
在jQuery中，可以使用`.animate()`方法来创建自定义的动画效果。例如，按钮的大小、形状、位置等属性都可以在动画过程中发生变化，模拟液态流动的感觉。同时，通过CSS3的变换（transform）属性，可以实现按钮的旋转...
14. **jQuery idTabs**：不只是导航菜单，还可以实现内容区的切换，适合用于创建多面板的布局。 15. **Lavalamp**：带有液体流动效果的菜单，背景颜色会随着鼠标移动而流动，创造出独特的视觉效果。 这些jQuery...
总的来说，jQuery.lavalamp插件提供了一种创新的方式，使网站的导航菜单更加吸引用户注意力，提升了整体的交互体验。通过灵活的参数配置和自定义样式，开发者可以创造出独具特色的动画导航，让网站在众多网页中...
Lavalamp通常指的是一个JavaScript效果，它为网站的导航菜单添加了动态、流动的视觉效果，让人联想到熔岩灯的流动感。这种效果在早期的网页设计中非常流行，因为它可以提升用户体验，使网站看起来更生动有趣。 **...
7. **应用场景**：Gooey效果和抖动窗口常用于创新的用户界面设计，例如导航菜单、按钮反馈、加载动画等。它们能增加用户体验的趣味性和互动性，使网页或应用更加生动和吸引人。 总结来说，这个压缩包提供的是六种...