我刚AngularJS用grunt bower和创建了一个项目Yeoman.包含更新版本Angular 1.3.13.我想使用Angular UIbootstrap.我添加了响应的Nav Bar.但是在小屏幕上,下拉似乎不起作用.当我点击下拉列表时,整个菜单会隐藏.
这是我的index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="webClientApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an …我在几个地方读过,当你链接的所有内容都是版权,条款和条件等时,没有必要使用<nav>内部<footer>.
但是,我正在处理的网站在页脚中有这些链接:新闻,职业,隐私.显然隐私符合以上描述不使用<nav>.但是新闻和职业 - 虽然它们显然没有像顶级主导航中那样重量 - 但却是重要的内容领域,与其他地方无关.这些是否合理使用<nav>？
我的猜测是肯定的,但我是一个HTML5新手,所以我想我会要求第二个意见!
我是bulma css http://bulma.io/的新手.
我正在尝试为移动用户使用汉堡包菜单.我只是按照这个页面上的说明操作:http://bulma.io/documentation/components/nav/
但它不起作用.我应该添加什么？
实际上,我可以看到汉堡包菜单,但是当我点击它时它不起作用.
谢谢.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>test</title>
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section class="hero is-fullheight is-primary is-bold">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item" href="/">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="/about">
About
</a>
<a class="nav-item" href="/path">
Path
</a> …在这个下拉导航中,我正在构建如果打开一个下拉列表,然后单击打开第二个,黑框应保持可见.当您点击第二个下拉列表时黑盒消失,并在下拉列表完全打开后重新出现.
更新
我还注意到下拉列表打开后黑框显示,它应该同时打开.
我希望这是有道理的,谢谢你的帮助!
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active'); …最近,我去我的导航栏来充当,是坚持我的页面的顶部后,我向下滚动到某一点,但是当我达到我的整个页面的内容导航栏闪烁底部的粘性导航栏,有时甚至消失.把它想象成一个会闪烁的旧电视,你最终会撞到一边停止闪烁.如何点击我的导航栏以阻止它闪烁. 这是我的网站,所以你可以看到闪烁的所有荣耀.
这是我的导航HTML:
<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
<div class="navbar-inner" data-spy="affix-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#service-top">Services</a></li>
<li><a href="#contact-arrow">Contact</a></li>
</ul><!--/.nav-->
</div><!--/.nav-collapse collapse pull-right-->
</div><!--/.container-->
</div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->
这是我的JS:
<script>
$(document).ready(function() {
$('#nav-wrapper').height($("#nav").height()); …好像我错过了什么,但我还是想不出来.问题是我申请display: none;了#nav-icon.但它仍占用空间.这是我的编码.
HTML
<div id="nav">
<a href="" id="nav-icon"> <img src="navigation.png" alt="nav-menu"</a>
<ul>
<li> <a href="#"> LINK </a> </li>
<li> <a href="#"> LINK </a> </li>
<li> <a href="#"> LINK </a> </li>
<li class="navimage"> <a href="twitter.com"> <img src="twitter-icon.png" alt="twitter-icon" /> </a> </li>
<li class="navimage"> <a href="facebook.com"> <img src="facebook-icon.png" alt="facebook-icon" /> </a> </li>
</ul>
</div>
CSS
#nav {
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
text-align:center;
max-width:95%;
margin:0 auto;
}
#nav li {
display:inline;
}
#nav a {
display:inline-block;
padding:15px;
font-weight:bold; …我很难将导航栏居中放在此页面上.
我尝试nav { margin: 0 auto; }了一些其他的方法,但我仍然无法集中它.
我使用adminLTE主题进行bootstrap,它使用treeview-menu类来操作子菜单.
<?=Nav::widget([
'options' => ['class' => 'sidebar-menu treeview'],
'items' => [
['label' => 'Menu 1', 'url' => ['/a/index']],
['label' => 'Menu 2', 'url' => ['/custom-perks/index']],
['label' => 'Submenu', 'items' => [
['label' => 'Action', 'url' => '#'],
['label' => 'Another action', 'url' => '#'],
['label' => 'Something else here', 'url' => '#'],
],
],
],
]);
?>
我试过用:
['label' => 'Submenu', 'options' => ['class' => 'treeview-menu'], 'items' =>..
这显然不起作用.
我注意到Menu :: widget有一个,submenuTemplate但是当我使用它时它停止了拾取"活动".
有没有办法我可以改变adminLTE调用应用于treeview菜单的方式(尝试将它在app.js中更改为下拉菜单但没有帮助)或重新分配UL子菜单类而不进入供应商代码？
第65行:\ yii\bootstrap\Dropdown - …
此按钮触发下一个选项卡以加载内容,但选项卡本身不切换,它仍保留在第一个选项卡上.
<br><a class="btn btn-primary" href="#tab2" data-toggle="tab">Review</a><br>
以下是nav nav-tabs的代码:
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
<li><a href="#tab2" data-toggle="tab">Quantities</a></li>
<li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
用于切换标签和内容的任何解决方案均为 APPRECIATED
..也许是一种更改按钮以触发next()*bootstrap-tab.js v2.3.1中的功能的方法:
, activate: function ( element, container, callback) {
var $active = container.find('> .active')
, transition = callback
&& $.support.transition
&& $active.hasClass('fade')
function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}
if ( element.parent('.dropdown-menu') ) …我网站上的顶部栏导航左对齐,如下所示:
| Home | aveoTSD | Silent Nite |
我想像这样中心顶部栏导航:
| Home | aveoTSD | Silent Nite |
使其与"示例"文本的红色条完全相同.
这是我的CSS.