nav

Adding active class to current page in nav with jQuery

由 倖福魔咒の 提交于 2019-12-06 13:57:49
问题 I'm trying to add the 'active' class to the current page's nav link in the header. I made some progress, but I'm running into a small bug, and would appreciate some help. I know the answer is quite obvious, however, I'm new to jQuery/Javascript and I'm having trouble finding it on my own. Here's my nav HTML structure: <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="nav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="/" class="nav-link">Me</a> </li> <li class=

How to add social media buttons to bootstrap nav

由 不羁的心 提交于 2019-12-06 09:33:56
问题 I am trying to add Twitter, Google+ and Facebook buttons to a navigation header so that they appear on the right of the top right corner of the header, on a line above the nav menu. I am using Bootstrap. I tred the forllowing: 1) row class 2) table with two rows 3) another ul Non of these worked. Please find below the code without the social button links. HTML: <div class="nav"> <div class="container"> <span class="pull-left"> <a href="home.html"> <img src="images/logo150.png" width="150"> <

换肤加二级下拉菜单功能（传参）

由 允我心安 提交于 2019-12-06 07:38:57
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>换肤加导航栏</title> <style type="text/css"> /*排他思想写换肤*/ /*导航栏二级下拉菜单*/ *{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; margin: 0 auto; } #main{ width:800px; height: 60px; position: relative; } #nav{ width: 800px; height: 60px; background-color: paleturquoise; position: absolute; left: 50%; margin-left: -400px; top: 60px; /*margin-left: -300px;*/ } #na{ width: 100px; text-align:

jquery navigation color and height change on scroll

由 被刻印的时光 ゝ 提交于 2019-12-06 03:40:18
I'm looking to change the navigation from transparent to a color on scroll. Much like this site. http://createone.com/contact-us/ I've seen posts about changing size which is great, I'll use this as well but would like to mainly go from transparent to a color. Any help would be great. I do have a little experience with jquery but haven't been able to figure it out or modify someone else's previous questions to my needs. I saw this but wasn't able to get it to work for me. jquery change opacity and height on scroll A jsfiddle demo would be great! Thanks in advance for the help. Also I'm using

jQuery导航栏，点击切换颜色

由 烂漫一生 提交于 2019-12-06 03:23:01
1.写好静态页面 <div class="navBox"> <div class="comWidth"> <ul class="nav"> <li class="active"><a href="javascript:void(0)">网站首页</a><span></span></li> <li><a href="javascript:void(0)">公司简介</a><span></span></li> <li><a href="javascript:void(0)" >产品优势</a><span></span></li> <li><a href="javascript:void(0)" >公司新闻</a><span></span></li> <li><a href="javascript:void(0)" >在线订单</a><span></span></li> <li><a href="javascript:void(0)">客户留言</a><span></span></li> <li><a href="javascript:void(0)">联系我们</a></li> </ul> </div> </div> css样式 /*导航*/ .navBox{ height: 48px; width: 100%; background-color: #319BF3; } .navBox

Bootstrap, nav-tabs, dropdown menus; how to set active tab based on URI

由 心已入冬 提交于 2019-12-06 03:11:16
问题 I'm using Bootstrap nav-tabs/dropdown menus component as my primary navigation bar but I cant figure out how to set the active menu based on an incoming URI. There are a lot of different examples/posts on the net that use nav-tabs for hiding and displaying specific div content or working with the # symbol but I just want to read the incoming URI using PHP, the _SERVER["REQUEST_URI"] variable and set a tab active. Be it a nested location in the navigation or not is also a problem. Here what I

9.jQuery之简洁版滑动下拉菜单

由 风流意气都作罢 提交于 2019-12-06 02:20:07
知识点：hover的使用，已经slideToggle的切换效果 1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 li { 8 list-style-type: none; 9 } 10 11 a { 12 text-decoration: none; 13 font-size: 14px; 14 } 15 16 .nav { 17 margin: 100px; 18 } 19 20 .nav>li { 21 position: relative; 22 float: left; 23 width: 80px; 24 height: 41px; 25 text-align: center; 26 } 27 28 .nav li a { 29 display: block; 30 width: 100%; 31 height: 100%; 32 line-height: 41px; 33 color: #333; 34 } 35 36 .nav>li>a:hover { 37 background-color: #eee; 38 } 39 40 .nav ul { 41 display: none; 42 position: absolute; 43 top: 41px; 44 left: 0; 45 width: 100%; 46

UINavigationController 和 UITabBarController（非基础使用，测试一下思路）

由 99封情书 提交于 2019-12-06 01:00:28
1、viewController都有nav 2、nav.root=TabBarController 各个viewController 的区别 第一种 每个viewControll对应一个navigationcontroller let firstVC=IndexViewController(); let nav1=UINavigationController(rootViewController:firstVC); let image1=UIImage(named:"a"); nav1.tabBarItem=UITabBarItem(title:"aaa",image:image1,tag:1); let secondVC=IndexViewController(); let nav2=UINavigationController(rootViewController:secondVC); let image2=UIImage(named:"b"); nav2.tabBarItem=UITabBarItem(title:"bbb",image:image2,tag:2); let thirdVC=IndexViewController(); let nav3=UINavigationController(rootViewController:thirdVC); let image3

css滑动门技术

由 空扰寡人 提交于 2019-12-05 17:14:46
滑动门的核心技术： 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，以使自由拉伸滑动利用css精灵（主要是背景位置）和盒子padding撑开宽度，以便适应不同字数的导航栏 一般经典布局 <li> <a href="#"> <span>导航内容</span> </a> </li> 样式设置 a { margin: 100px; display: inline-block; height: 33px; background: url(image/ao.png) no-repeat; padding-left: 15px; } a span { height: 33px; display: inline-block; background: url(image/ao.png) no-repeat right; padding-right: 15px; } 总结： 1. a设置背景左侧， padding撑开合适宽度 2. span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度 3. 之所以a包含span就是因为整个导航都是可以点击的 微信导航栏练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0;

Hide menu items one-by-one on window resize

由 你说的曾经没有我的故事 提交于 2019-12-05 09:39:22
I'm working on a navbar consisting of a logo & menu-items floating left and a searchbar & a dropdown-button floating right. When the browser window reaches a certain small size the navbar elements will start to jump into the next row, because there isn't enough space anymore. Have a look here: http://codepen.io/anon/pen/YXBaEK Instead of starting a new row I'd like every menu item to disappear one-by-one if the horizontal space is running out. (I still have the menu links in a dropdown menu next to the search bar). HTML <div class="nav"> <div class="item-left">Logo</div> <div class="menu"> <a>
订阅 nav