`
nqp_java
  • 浏览: 78194 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery仿google导航栏"更多" 菜单

 
阅读更多

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;

})

});

 

效果图:



 

  • 大小: 13.9 KB
分享到:
评论

相关推荐

    jQuery仿google导航栏\"更多\" 菜单

    本文将详细解析"jQuery仿google导航栏\"更多\"菜单"这一主题,帮助开发者创建类似Google网站那样功能丰富的导航菜单,提升用户体验。 首先,我们需要理解Google导航栏中的"更多"菜单是如何工作的。在Google的网页...

    仿google导航条

    "仿google导航条"项目就是针对这种设计理念的一种实现,旨在创建一个与Google首页导航菜单相似的交互效果。这个项目主要涉及前端开发中的HTML、CSS以及JavaScript技术,下面我们将详细探讨这些知识点。 首先,HTML...

    jQuery横向导航选项卡下拉菜单显示代码

    在网页设计中,导航栏是用户与网站交互的重要部分,而使用jQuery实现的横向导航选项卡结合下拉菜单,能够提供高效且直观的用户体验。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、...

    仿google动态导航

    【标签】"仿google动态导航"是一个关键点,表明这个项目专注于模仿Google网站的导航栏行为。在实际的网页设计中,动态导航菜单通常包括下拉菜单、滑动效果、平滑过渡等元素,这些都可以通过JavaScript和CSS来实现。...

    利用bootstrap与jQuery制作的响应式自适应导航栏

    在实际项目中,你可能还需要根据需求定制样式、添加更多链接或下拉菜单,但这个基础结构已经足够开始你的开发工作。记住,实践是最好的老师,不断尝试和改进,你的技能将不断提升。在 Java 和 TE 网络领域,掌握这样...

    网页导航栏示例100个

    - Materialize CSS:谷歌的Material Design风格,包含导航栏模板。 - jQuery:简化DOM操作,实现导航栏的交互功能。 这个资源包中的"导航菜单"可能包含HTML、CSS和JavaScript文件,分别负责结构、样式和交互。...

    jQuery右键点击指定区域下拉菜单代码

    为了增强功能,可以添加更多的自定义选项,如动态生成菜单项、异步加载数据、菜单项的事件处理等。此外,还可以根据需求调整Bootstrap的样式,以适应网页的整体设计风格。 总之,通过结合jQuery和Bootstrap的便利性...

    仿google首页下端图片文字导航

    4. **JavaScript交互**:为了增加用户互动,可能使用JavaScript或jQuery添加更多的动态效果,比如图片轮播、鼠标滑过时的高亮显示、点击后弹出下拉菜单等。 5. **SEO优化**:在设计过程中,应考虑搜索引擎优化(SEO...

    超实用的jQuery代码段

    10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择多个值 10.28 创建双重范围的滑块 10.29 实现开关效果的选择功能 10.30 创建主题化的表单效果 ...

    jquery1.9.1+bootstrap3.3.7

    例如,导航栏的折叠效果、模态框的显示隐藏、下拉菜单的交互等,都需要jQuery来实现动态效果和事件监听。在Bootstrap 3.3.7中,要求jQuery版本至少为1.9.1,因为此版本引入了对HTML5 data-*属性的更全面支持,这是...

    Google Play垂直菜单.zip

    而“Google Play垂直菜单”很可能是指Google Play应用内部的一种界面设计元素,即菜单栏的布局方式,这种布局方式将菜单项从水平排列改为垂直排列,以适应不同屏幕尺寸和用户交互习惯。在Web开发中,实现这样的效果...

    JQuery文档插件资料

    - **Bootstrap**: 基于jQuery的前端框架,提供响应式布局和丰富的组件,如模态框、下拉菜单、导航条等。 - **jQuery UI**: 提供各种用户界面组件,如拖放、排序、日期选择器等。 - **jQuery Validation Plugin**:...

    疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

    在Bootstrap部分,你将学习如何利用栅格系统创建灵活的布局,使用预定义的CSS样式和JavaScript组件,如导航栏、下拉菜单、模态框和轮播图等。此外,还会涉及自定义Bootstrap主题和第三方插件的集成,使你能创建出...

    韩国GOOGLE首页动感导航.rar

    在本案例中,这个导航栏模仿了韩国Google首页的动态效果,提供了丰富的用户体验。 【描述】中的关键信息表明,这个导航并非使用Flash技术创建。Flash曾是制作动态效果和交互式内容的流行工具,但由于其不支持移动...

    疯狂前端开发讲义 jQuery AngularJS Bootstrap前端开发实战

    2. UI组件:包括导航栏、模态框、按钮、表单、下拉菜单等多种预先设计的组件。 3. JavaScript插件:如轮播(`carousel`)、提示(`tooltip`)和模态(`modal`)等,为网页添加动态效果。 4. 自定义:通过Sass预处理器和...

    基于BootStrap框架的前端菜单页面.rar

    在实际项目中,你可能还需要根据需求添加更多的定制,例如添加下拉菜单、链接到其他页面、改变颜色和样式等。你可以通过添加额外的Bootstrap类或者自定义CSS来实现这些功能。 总的来说,这个压缩包提供了一个基于...

    jquery插件集

    7. **动画效果**:Animate.css和jQuery Easing插件提供更多的动画选项和过渡效果,使得动态展示更加丰富多彩。 8. **导航与菜单**:如Nivo Slider用于创建高级滑块,而metisMenu则为网站添加了可折叠的侧边栏菜单。...

    materialdesignhierarchicaldisplay是一款MaterialDesign风格分层显示动画jQuery插件

    在实际应用中,materialdesignhierarchical-display可以广泛应用于菜单、导航栏、折叠面板等需要层次展示的场景。例如,在一个多层次的导航菜单中,当用户点击一个父级菜单项时,与其相关的子菜单可以以动画形式优雅...

    管理系统系列--基于AngularJS1.3.18 + BootStrap 3.3.7 + +jQuery3.2.1.zip

    版本3.3.7是Bootstrap 3系列的最后一个维护版本,它包含了诸如栅格系统、导航条、模态框、下拉菜单等丰富的UI组件。在本项目中,Bootstrap帮助快速搭建用户界面,确保跨平台和跨设备的一致性和美观性,同时提供了...

Global site tag (gtag.js) - Google Analytics