nav | 易学教程

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

阅读更多关于 Bootstrap, nav-tabs, dropdown menus; how to set active tab based on URI

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've been trying: <ul class="nav nav-tabs" id="supernav"> <li class="active"><a href="/page1.html" data

Unorthodox use of html5 nav tag

阅读更多关于 Unorthodox use of html5 nav tag

问题 I have made "creative" use of the new html5 elements, sometimes pushing the intended boundaries a bit. Like most, my site is mainly made of articles comments and links to other articles. I decided that I'd use the article tag just once, so there's no confusion whatsoever. For comments, I'm using the aside element and I think that it fits the definition - it's related to the content but it can be done without. In the case of links to other articles (actually, titles with excerpts and taxonomy

Floating nav bar that stops fixed to the top of the page

阅读更多关于 Floating nav bar that stops fixed to the top of the page

问题 I am trying to mimic something that I have seen a few different times. There is usually a banner with a nav bar below and when the page is scrolled it moves until it touches the top then stops and stays fixed. I am not completely sure how to accomplish this. I have seen a few different things that just dont work. After looking around I figured out it will work something like this but I can seem to get it to work. I think I am missing some stuff <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

dynamically apply active class to nav li

阅读更多关于 dynamically apply active class to nav li

I have included a header to my files as in include. In the header is the nav bar. How do I, using jQuery, apply class="active" to the relevant li . The only way I could think of doing it is to set a variable on the actual pages, apply an id that is equal to that variable of the relevant page and if function so if they match apply a class to the li. However, I thought there must be a simpler way of achieving this. <ul class="nav nav-pills right" id="div"> <li id="home" class="active"> <a href="index.php">Home</a> </li> <li id="search"> <a href="search.php">Search</a> </li> <li id="contact"> <a

How to make navigation bar change color when you scroll down the page?

阅读更多关于 How to make navigation bar change color when you scroll down the page?

I would like the navigation bar to be transparent but when you scroll down the page it changes to color red for example. <div class="nav"> <div class="container"> <div class="logo"> <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a> </div> <div class="navMain"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> Something like this: http://jsfiddle.net/qrhjdfmd/ var a = $(".nav").offset().top; $(document).scroll(function(){ if($

HTML5 sub nav semantics

阅读更多关于 HTML5 sub nav semantics

A quick question re: HTML5 nav, specifically that of sub navigation (from a semantic point of view). I have <nav> in the header for the main menu. Down the left of a standard page I have second level nav and down the right third level nav (no, I didn’t design the site). Is there anything I can do HTML5/ARIA wise to differentiate between the 3 menus? Or are they all simple <nav> blocks? I dont even think I need <aside> in either left or right column as there isnt any additional info apart from these actual menus. Any thoughts/advice would be much appreciated. This may be an old question, but

Centered icons above / over / on top of text in Navbar? (Bootstrap 3)

阅读更多关于 Centered icons above / over / on top of text in Navbar? (Bootstrap 3)

I spent some time searching for a way to do this & tried a couple (close) examples without success. Example here I'm basically trying to put the little android icons centered above the "Sub#" text in the subnav. Any help would be appreciated. The area of the code is: <span class=""> <span>Sub1</span> <i class="fa fa-android fa-lg"></i> </span> You should wrap each of icons in col-xs-2 with a col-xs-offset-1 in the first div to make it centered. You can use <br> tags to create a line break between your icon and your text. JSFiddle Demo <div class="col-xs-offset-1 col-xs-2"> <i class="fa fa

HTML5 nav tag correct usage

阅读更多关于 HTML5 nav tag correct usage

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: <ul class="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">Forum</a></li> <li><a href="#" class="mainSelected">Construct</a></li> <li><a href="#">Arcade</a></li> <li><a href="#">Manual</a></li> </ul> <ul class="subMenu"> <li><a href="#">Homepage</a></li> <li><a href="#">Construct</a></li> <li><a href="#" class="underSelected">Products</a></li> <li><a href="#">Community Forum</a></li> <li><a href="#">Contact Us</a></li> </ul> Is it more semantically correct to have a <nav> around both these <ul> individually, or should one nav wrap

css设置导航条（练习）

阅读更多关于 css设置导航条（练习）

思路导航条（一般都使用无序列表）创建导航条的结构 1，清除默认样式（但是无序列表前面的点只是隐藏起来了，还是存在的） 2，去项目符号 list-style:none; 3，为ul设置背景颜色 4，设置背景宽度（在IE6中，如果为元素指定了宽度，则会默认开启hasLayout） 5，设置元素居中 6，设置li，变成横向（浮动会导致父元素塌陷，注意解决） 7,为超链接指定宽度（为Ii指定宽度点击时只有对准对应的字才能点击，不能在宽度范围内点击）所以要为超链接指定宽度但是超链接是行内元素，不能指定宽度，所以之前要把超链接转换成块元素（但是要注意a的宽度设置，a的父元素是li,而不是ul） 8，设置文字居中，text-align 9，设置上下内边距（美观） 10，去除下划线，text-decoration 11，设置字体颜色，加粗 12，鼠标移入换颜色（设置伪类） 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>导航条练习</title> 6 <style type="text/css"> 7 /*清除默认布局（但是无序列表前面的项目符号只是隐藏了，并没有去除掉）*/ 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 /*设置导航条的背景颜色，宽度

用Bootstrap知识写简易版Bootstrap官方网站首页

阅读更多关于用Bootstrap知识写简易版Bootstrap官方网站首页

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BootStrap网站首页</title> <link rel="stylesheet" type="text/css" href="js/bootstrap.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <style type="text/css"> body{ text-align: center; } #nav{ margin-bottom: 0; } #brand{ width:100%; height:500px; margin-top:0; padding-top: 0; background-color:indigo; } #bts1{ padding-top:90px; font-size:100px; font-weight: bold; color:#ffffff; } #bts2{ padding-top:15px; font-size:30px; font-weight: bold; color:#ffffff; }