<!DOCTYPE html>
<!-- saved from url=(0073)http://tutsme-webdesign.info/tutorials/navs/pills_stacked_panesright.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Bootstrap 3 Navs Tabs Pills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap core CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-stacked" data-toggle="collapse">
<li class="dropdown">
<span class="glyphicon glyphicon-tree-deciduous"> Nachbarschaft </span><b class="caret"></b>
<ul class="dropdown-menu">
<li role="presentation">Profil</li>
<li role="presentation">Nachbarn</li>
</ul>
</li>
<li role="presentation"><span class="glyphicon glyphicon-tasks"> Aufgaben</span></li>
</ul>
</div><!-- end of container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
How can I make the dropdown of the first pill make the lower pills move down? So when I click the dropdown, I can still see the lower pill "Aufgaben"?
JSFiddle Example: http://jsfiddle.net/o0xutq34/
(based on http://tutsme-webdesign.info/tutorials/navs/pills_stacked_panesright.html)
Thanks in advance!
You would need to make dropdown div statically positioned (not absolutely) and also remove float from it:
.container .dropdown-menu {
position: static;
float: none;
}
Demo: http://jsfiddle.net/o0xutq34/1/
Related
I have been trying to use MateralizeCSS; only designed and created by Google; as an alternative for Bootstrap as a test and to see the differences by myself. However there is something that is weird with Materalize. The HTML Setup stated on their official website is simple, but when I try to resize the window and press the hamburger icon nothing happens. This means that the JavaScript is not loaded correctly, but it's actually included in my HTML file. First I tried to use the CDNs and it's not working. So I decided to download the files and link them in the file, but it's still not working.
My HTML:
<!DOCTYPE html>
<html lang="en-US" class="gr__materializecss_com">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="materialize/css/materialize.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> -->
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<!-- Import jQuery before materialize.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
-->
</body>
</html>
I opened the Inspector to see the Starter Template structure for the navbar and it's the same as mine. I can't figure out the problem. So any logical explanation is appreciated.
You just need to initialize the jQuery plugin for the sideNav method to work. Hope this helps!
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>
I am try to use nested sort plugin from https://github.com/mjsarfatti/nestedSortable , but i keep getting this error
Uncaught TypeError: $(...).nestedSortable is not a function
This is my head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><?php echo $meta_title; ?></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.mjs.nestedSortable.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
This is the body
<ol class="sortable">
<li><div>Some content</div></li>
<li>
<div>Some content</div>
<ol>
<li><div>Some sub-item content</div></li>
<li><div>Some sub-item content</div></li>
</ol>
</li>
<li><div>Some content</div></li>
</ol>
Javascript code that i use
$(document).ready(function(){
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
});
Please help me
I have tested nestedSortable and this code work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><?php echo $meta_title; ?></title>
<!-- Bootstrap -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
<script>
$(document).ready(function(){
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
});
</script>
</head>
<body>
<div>
<ol class="sortable">
<li><div>Some content</div></li>
<li>
<div>Some content</div>
<ol>
<li><div>Some sub-item content</div></li>
<li><div>Some sub-item content</div></li>
</ol>
</li>
<li><div>Some content</div></li>
</ol>
</div>
</body>
try putting this code in a file and execute it. If it works dont use external links
download the css and js keep them in your project folder and include them from there
The error indicates the method does not exist on your jQuery object. This means the nestedSortable plugin has not loaded.
Refer to this line:
<script src="js/jquery.mjs.nestedSortable.js"></script>
Check that the address is correct, and that the JavaScript file exists in that location.
update your script
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
To
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.mjs.nestedSortable.js"></script>
On the following github: NESTEDSORTABLE
You have to use the upgraded version of nestedSortable. Here is the updaed version of nestedSortable: https://github.com/ilikenwf/nestedSortable
Also you have not included jQuery-UI.js file in your file : <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> add this code before you include jquery.mjs.nestedSortable.js file
I followed all the instructions from a tutorial that I watched but the responsive menu is not expanding? Even the dropdown is not working. When I click the button nothing's happening, it's only changing its color. What could I be doing wrong?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<!-- Bootstrap -->
<link href="view/css/bootstrap.min.css" rel="stylesheet">
<link href="view/css/styles.css" rel="stylesheet">
<script src="js/respond.js"></script>
<script src="view/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="view/images/logo.png">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
The Institution <b class="caret"></b>
<ul class="dropdown-menu">
<li>About the Institute</li>
<li>Research & Programs</li>
<li>Board of Advisers</li>
<li>Educational Quality Team</li>
</ul>
</li>
<li>The Center</li>
<li>Opportunity</li>
<li>Get In Touch</li>
</ul>
</div>
</div></div>
JS
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
It's working now I just edited this part
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
and also deleted everything except for this
<script src="js/respond.js"></script>
thanks to everyone who answered! :)
You have bootstrap.js included twice, once before jQuery is loaded. Remove
<script src="view/js/bootstrap.min.js"></script>
in your head section
I would like my site to have a menu with tabs like the one shown
in Twitter Bootstrap website.
I have downloaded jquery 1.11.2 in the js/ folder and placed the following
in the head section:
<link rel="stylesheet" href="css/bootstrap.css">
<!--- Google fonts-->
<!-- javascript libraries -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--- personal styles should always be below bootstrap -->
<link rel="stylesheet" href="css/theme.css">
Next to get the Navs menu I copied and paste the code from the Bootstrap component page ( I just changed the text to display)
<div class="row">
<div class="col-md-12 site-menu">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Projects</li>
<li role="presentation">About</li>
</ul>
</div>
The navs however do not look the way I expected, the links are shown as a bulletted list.
What am I doing wrong? How can I get to display Navs Tabs ans Navs pills?
I guess you haven't linked the CSS files properly, try with the latest version CDN links,
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->
<!--- Google fonts-->
<div class="row">
<div class="col-md-12 site-menu">
<ul id="myTab" class="nav nav-tabs">
<li role="presentation" class="active">Home
</li>
<li role="presentation">Projects
</li>
<li role="presentation">About
</li>
</ul>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The general outline of the html file should look like this:
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap Core CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Amatic+SC:400,700" rel="stylesheet">
<!-- My Theme style -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--lots of html-->
<!--lots of html-->
<!--lots of html-->
<!-- jQuery 2.0.2 -->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!-- Bootstrap Core JS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script>
<!-- some JS Function -->
</script>
</body>
</html>
I am not able to get the navbar button to toggle the menu down when the navbar is collapsed for smaller browsers. I have tried all the suggestions on this forum regarding different js links and I have looked at the source code of numerous bootstrap example sites where the button works but I am still not able to get this to work. I can even build it in bootply where it works fine and when I bring it into my file directory it doesn't work.
Is there something in this code that is obviously preventing this from working?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Snow's Farm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no">
<meta name="description" content>
<meta name="author" content="">
<link href="./bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./main.css" rel="stylesheet" media="screen">
</head>
<body class="bs-docs-home" style data-twttr-rendered="true">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Snow's Farm</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="dropdown" href="www.google.com"><p>The Farm Family</p></a></li>
<li><p>Mulch</p></li>
<li><p>Soil</p></li>
<li><p>Stone</p></li>
<li><p>Christmas Trees</p></li>
<li><p>Delivery</p></li>
<li><p>Pricing Documents</p></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="./respond.min.js"></script>
<script src="./jquery.js"></script>