html代码:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gmenu.js"></script>
</head>
<body>
<div class="top_nav_left">
<ul>
<li>
<a class="s">More<span class="arrow"></span></a>
<ul id="s">
<li><a href="#">Plugins and jQuery Examples</a></li>
<li><a href="#">Prototype Examples</a></li>
<li><a href="#">Mootools Examples</a></li>
<li><a href="#">Javascript Examples</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
css代码:
body{
padding:0;
margin:0;
}
.top_nav_left{
font: 13px/27px Arial,sans-serif;
color:#FFFFFF;
height:30px;
background: black;
}
.top_nav_left a:hover{
background-color:#4C4C4C;
color:#FFFFFF;
}
.top_nav_left a{
text-decoration: none;
padding: 6px 8px 7px;
color:white;
outline:none;
cursor: pointer;
}
.top_nav_left ul{
list-style: none;
margin:0;
padding:0 0 0 10px;
}
.top_nav_left ul li{
padding:0;
float:left;
}
.top_nav_left ul li ul li{
padding:0;
float:none;
margin: 0 0 0 0px;
width:100%;
}
.top_nav_left ul li ul{
position: absolute;
border: 1px solid #C3D1EC;
box-shadow: 0 1px 5px #CCCCCC;
margin-top: -1px;
display:none;
padding: 0px 16px 0px 0;
}
.top_nav_left .active ul{
display:block !important;
}
.top_nav_left .active a{
background-color: white;
border: 1px solid #C3D1EC;
border-bottom: 0;
box-shadow: 0 -1px 5px #CCCCCC;
display: block;
height: 29px;
padding: 0 8px 0 8px;
position:relative;
z-index: 1;
color:#3366CC;
}
.top_nav_left .active a:hover{
background-color:white;
}
.top_nav_left .active ul a:hover{
background-color:#e4ebf8;
}
.top_nav_left .active ul a{
border: 0 !important;
box-shadow: 0 0 0 #CCCCCC;
border:0;
width: 100%;
}
.top_nav_left .arrow {
border-color: white transparent transparent;
border-style: solid dashed dashed;
margin-left: 5px;
position: relative;
top: 10px;
}
js代码
(function($) {
$.fn.fixedMenu = function() {
return this.each(function() {
var menu = $(this);
menu.find('ul li > a').bind('click', function() {
if (menu.find('li:first').hasClass('active')) {
menu.find('li:first').removeClass('active');
}
else {
menu.find('li:first').addClass('active');
}
})
});
}
})(jQuery);
var obj=document.getElementById('s');
function hide(){
obj.style.display='none';
}
function show(){
obj.style.display='block'
}
$('document').ready(function(){
$('.top_nav_left').fixedMenu();
$(':not(body)').click(function(e){
if(!$(e.target).is('div.top_nav_left *')){
var menu = $('.top_nav_left');
menu.find('li:first').removeClass('active');
}
return false;
})
});
效果图:
相关推荐
本文将详细解析"jQuery仿google导航栏\"更多\"菜单"这一主题，帮助开发者创建类似Google网站那样功能丰富的导航菜单，提升用户体验。 首先，我们需要理解Google导航栏中的"更多"菜单是如何工作的。在Google的网页...
"仿google导航条"项目就是针对这种设计理念的一种实现，旨在创建一个与Google首页导航菜单相似的交互效果。这个项目主要涉及前端开发中的HTML、CSS以及JavaScript技术，下面我们将详细探讨这些知识点。 首先，HTML...
在网页设计中，导航栏是用户与网站交互的重要部分，而使用jQuery实现的横向导航选项卡结合下拉菜单，能够提供高效且直观的用户体验。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、...
【标签】"仿google动态导航"是一个关键点，表明这个项目专注于模仿Google网站的导航栏行为。在实际的网页设计中，动态导航菜单通常包括下拉菜单、滑动效果、平滑过渡等元素，这些都可以通过JavaScript和CSS来实现。...
在实际项目中，你可能还需要根据需求定制样式、添加更多链接或下拉菜单，但这个基础结构已经足够开始你的开发工作。记住，实践是最好的老师，不断尝试和改进，你的技能将不断提升。在 Java 和 TE 网络领域，掌握这样...
- Materialize CSS：谷歌的Material Design风格，包含导航栏模板。 - jQuery：简化DOM操作，实现导航栏的交互功能。 这个资源包中的"导航菜单"可能包含HTML、CSS和JavaScript文件，分别负责结构、样式和交互。...
为了增强功能，可以添加更多的自定义选项，如动态生成菜单项、异步加载数据、菜单项的事件处理等。此外，还可以根据需求调整Bootstrap的样式，以适应网页的整体设计风格。 总之，通过结合jQuery和Bootstrap的便利性...
4. **JavaScript交互**：为了增加用户互动，可能使用JavaScript或jQuery添加更多的动态效果，比如图片轮播、鼠标滑过时的高亮显示、点击后弹出下拉菜单等。 5. **SEO优化**：在设计过程中，应考虑搜索引擎优化（SEO...
10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择多个值 10.28 创建双重范围的滑块 10.29 实现开关效果的选择功能 10.30 创建主题化的表单效果 ...
例如，导航栏的折叠效果、模态框的显示隐藏、下拉菜单的交互等，都需要jQuery来实现动态效果和事件监听。在Bootstrap 3.3.7中，要求jQuery版本至少为1.9.1，因为此版本引入了对HTML5 data-*属性的更全面支持，这是...
而“Google Play垂直菜单”很可能是指Google Play应用内部的一种界面设计元素，即菜单栏的布局方式，这种布局方式将菜单项从水平排列改为垂直排列，以适应不同屏幕尺寸和用户交互习惯。在Web开发中，实现这样的效果...
- **Bootstrap**: 基于jQuery的前端框架，提供响应式布局和丰富的组件，如模态框、下拉菜单、导航条等。 - **jQuery UI**: 提供各种用户界面组件，如拖放、排序、日期选择器等。 - **jQuery Validation Plugin**:...
在Bootstrap部分，你将学习如何利用栅格系统创建灵活的布局，使用预定义的CSS样式和JavaScript组件，如导航栏、下拉菜单、模态框和轮播图等。此外，还会涉及自定义Bootstrap主题和第三方插件的集成，使你能创建出...
在本案例中，这个导航栏模仿了韩国Google首页的动态效果，提供了丰富的用户体验。 【描述】中的关键信息表明，这个导航并非使用Flash技术创建。Flash曾是制作动态效果和交互式内容的流行工具，但由于其不支持移动...
2. UI组件：包括导航栏、模态框、按钮、表单、下拉菜单等多种预先设计的组件。 3. JavaScript插件：如轮播(`carousel`)、提示(`tooltip`)和模态(`modal`)等，为网页添加动态效果。 4. 自定义：通过Sass预处理器和...
在实际项目中，你可能还需要根据需求添加更多的定制，例如添加下拉菜单、链接到其他页面、改变颜色和样式等。你可以通过添加额外的Bootstrap类或者自定义CSS来实现这些功能。 总的来说，这个压缩包提供了一个基于...
7. **动画效果**：Animate.css和jQuery Easing插件提供更多的动画选项和过渡效果，使得动态展示更加丰富多彩。 8. **导航与菜单**：如Nivo Slider用于创建高级滑块，而metisMenu则为网站添加了可折叠的侧边栏菜单。...
在实际应用中，materialdesignhierarchical-display可以广泛应用于菜单、导航栏、折叠面板等需要层次展示的场景。例如，在一个多层次的导航菜单中，当用户点击一个父级菜单项时，与其相关的子菜单可以以动画形式优雅...
版本3.3.7是Bootstrap 3系列的最后一个维护版本，它包含了诸如栅格系统、导航条、模态框、下拉菜单等丰富的UI组件。在本项目中，Bootstrap帮助快速搭建用户界面，确保跨平台和跨设备的一致性和美观性，同时提供了...