I am trying to achieve the stackable effect as shown here:
http://twitter.github.com/bootstrap/components.html#navs
but somehow it is not working for me. Here is the link to a plunk that I have created:
http://plnkr.co/edit/LSR3ijKGiOIyrYAbHm7g
It just shows three list items one below another without the navbar effect of bootstrap.
<!doctype html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="offset4 span4">
<ul class="nav nav-tabs nav-stacked">
<li> Item1</li>
<li> Item2</li>
<li> Item3</li>
</ul>
</div>
</div>
</body>
</html>
I must be doing some blunder that something as simple as nav-stacked is not working. Would be glad and grateful if someone could point out my mistake.
Put the content in anchors, like so:
<ul class="nav nav-tabs nav-stacked">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
Demo: http://jsfiddle.net/jpKAF/
Related
I made a webpage, where I can change background color, font style and size by 9 different buttons.
Problem #1 here is I'm using one css file for every single button,
and problem #2 is that when for example changing background color to blue, and I want to change the font style to cursive, I cant have 2 active at the same time, the other one goes back to default.
Any advice on how to do this?
Here are my CSS and HTML markup:
<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<link href="style.css" rel="stylesheet">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 1 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift1.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background1.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift2.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background2.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 3 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift3.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background3.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<p class="skrift">skrifttypen skal endre seg.</p>
<p class="skrift">skrifttypen skal endre seg.</p>
<p class="skrift">skrifttypen skal endre seg.</p>
</body>
</html>
Well, do not swap stylesheet files for starters. You can either:
have different classes for different situations, and set these classes on your element withs JavaScript. This is quite easy even in vanilla JS, for example:
document.getElementById('myButton').classList.add("btn-red");
load override stylesheets dynamically, which will override existing styles. So instead of having full-blown, complete stylesheet, just put the modifications in the CSS files, and load it after the default stylesheet.
I would definitely recommend the first approach, it is much more maintanable and sane. Most CSS frameworks work the same way, just take a look at Bootstrap (twitter-bootstrap) for example.
Well, as the title said, my problem is that after add ajaxToolkit:SlideShowExtender to my Main.aspx, that page's Bootstrap dropdown menu stop working, and when i go to other page, drop down menu comeback to life itself. If i remove ajaxToolkit:SlideShowExtender from my Main.aspx, the Bootstrap dropdown menu begin to work again. So how can i put these 2 together?
I put my dropdown menu to my master page and all other pages is using that master page. Everything work fine unless i add ajaxToolkit:SlideShowExtender.
I also put these scripts on the head of the master page.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
And these are the drop down menu code in the master page.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Item</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>Log in</li>
<li>Registration</li>
<li>Log out</li>
<li>Modify</li>
</ul>
</li>
<li class="dropdown">
Orders<b class="caret"></b>
<ul class="dropdown-menu">
<li>Cart</li>
<li>History</li>
</ul>
</li>
<li id="adminControl" runat="server" visible="false" class="dropdown">
Admins<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item management</li>
<li>Order managerment</li>
<li>Article managerment</li>
</ul>
</li>
<li>Search</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!--/.nav-collapse -->
</div> <!--/container -->
</div> <!--/navbar navbar-default navbar-fixed-top -->
Than you all for reading this question and for all your help.
I've now tried several things and googled a lot, but so far to no avail.
I've been working on a project with twitter bootstrap and made a dropdown in the navigation. Everything works on the desktop but einwadnfrei on the smartphone I have extreme problems and can click a link in the dropdown. The menu includes with every click.
This one i have write in the index
<div class="nav-collapse collapse">
<ul class="nav">
<li class="index">tpno</li>
<li class="diensten dropdown">
DIENSTEN <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Interim Management</li>
<li>Case Management</li>
<li>Conflictbemiddeling</li>
</ul>
</li>
<li class="profile">Profiel</li>
<li class="contact">Contact</li>
</ul></div>
And this is what i include
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script>
jQuery(function($) {
$('.dropdown-toggle').dropdown()
});
</script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/bootstrap-dropdown.js"></script>
But it doesnt work on smartphone. I have forgotten something or done wrong? would be grateful for your help.
Can someone please point me to where I can go to find info on how to create a mobile menu (drop list) for the code bellow? All the tutorials that I have found has been on switching pages, nothing for filters such as bellow. I am using the isotop plugin to navigate through my site.
<!-- SMOOTH MENU DIV -->
<div id="nav-button"> </div>
<nav id="smooth-menu" role="navigation" class="main-nav-links responsive-nav">
<ul id="filters" data-option-key="filter">
<li>Home</li>
<li>About Danielle</li>
<li id="one">My Work
<ul class="second-level">
<li>Kids and Family</li>
<li>Babies</li>
<li class="last">Seniors</li>
</ul>
</li>
<li id="two">Info
<ul class="second-level">
<li>Session Fees</li>
<li>Finished Art</li>
<li class="last">About Your Session</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- end nav -->
I ended up using an alternative solution. I went with a different menu.
I've done nearly everything I can think of, but I can't get my bootstrap elements (namely the nav collapse and the tabs) to work locally. They all work beautifully in fiddle, so I'm pretty confused.
the fiddle is here: http://jsfiddle.net/e4RZE/3/
and my code for bringing the js into my project is below the footer, like so:
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
my code for the header is as follows:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button> <a class="brand" href="http://howard.edu">Project</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home
</li>
<li class="active">Contact
</li>
<li>Now Playing
</li>
<li class="dropdown"> Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory
</li>
<li>Planetarium
</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs
</li>
<li>Host an Event
</li>
<li>Educational Initiatives
</li>
</ul>
</li>
<li class="dropdown"> Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory
</li>
<li>Planetarium
</li>
<li class="divider"></li>
<li class="nav-header">HU Physics</li>
<li>Physics Homepage
</li>
<li>Physics and Astronomy
</li>
</ul>
</li>
<li>Volunteer
</li>
<li>FAQ
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
EDIT: Bootstrap.css, bootstrap-responsive.css and my custom file (betterstrap2.css) are added like so:
<link href="css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700 ' rel='stylesheet' type='text/css'>
<link href="css/betterstrap2.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
thanks in advance.
Make sure your jquery and bootstrap source files are located in the correct location to be loaded from those script tags.
Also, you should be loading the bootstrap.css file as well, if you want to actually see your bootstrapped elements looking pretty on the page :)
There are javascript errors or links to javascript files that are invalid. Hit F12 on the page and refresh to see what is failing.