I am writing a bootstrap site, and want to make a sort of pop out menu from the right of the screen. This menu needs to be hidden' and when a button "Menu" is clicked it pops out of screen right, and covers whatever is on screen right. it does not push the content out of the way. Kind of like the windows 8 menu when you slide your finger from screen right.
I've thought of making a dropdown menu, since it behaves almost like I want, except for it's position. But I need to change the dropdown behaviour, So that instead of the dropdown menu popping out attached to the dropdown button, it pops out of screen right, but I can't find out how to do this.
<head>
...
<link href ="CSS/Bootstrap.min.css" rel ="stylesheet"/>
</head>
<div class="col-xs-3">
<!--some side content-->
</div>
<div class="col-xs-9">
<!--some side content-->
</div>
<div class="col-xs-12">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<li class="dropup">
<a class="dropdown-toggle" data-toggle="dropdown">Menu
<ul> class="dropdown-menu">
<li>
</li>
<li>
</li>
</ul>
</a>
</li>
</div>
</nav>
</div>
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
I have three folders in my project:
Css with bootstrap css files(bootstrap-theme, bootstrap-theme min, bootstrap, bootstrap min)
Fonts
JS with bootstrap.js and bootstrap.min.js
Please show me how to do this.
If you know of a different way of making the menu I want in bootstrap I'd love to hear it as well.
Here is a simple example to get you going:
jsFiddle Demo
Note that an id was added to the a tag that opens the menu, to make it easy for jQuery to capture the click event on that element.
In the jQuery, we are using a variable mnuOut to keep track of whether the menu is IN or OUT (visible or hidden).
Also, we use the .animate() method to animate the slide out from the right. This works by changing the css attribute right:
FROM right:-80px (slid 80px beyond the right side of the screen)
TO right:0 where the right-most edge of the myMenu DIV is flush against the right side of the screen.
HTML:
<div id="myMenu">
<div id="item1" class="submenu">Item 1</div>
<div id="item2" class="submenu">Item 2</div>
<div id="item3" class="submenu">Item 3</div>
</div>
<a id="menuTrigger" class="dropdown-toggle" data-toggle="dropdown">Menu
CSS:
#myMenu{position:fixed;top:20px;right:-80px;width:80px;height:300px;background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}
jQuery:
mnuOut=false;
$('#menuTrigger').click(function(){
if (mnuOut){
//Menu is visible, so HIDE menu
$('#myMenu').animate({
right: '-80px'
},800);
mnuOut = false;
}else{
//Menu is hidden, so SHOW menu
$('#myMenu').animate({
right: 0
},800);
mnuOut = true;
}
})
If you want your menu to cover the content make sure you add
position: absolute;
Or
position: fixed;
Then after that give it
right: 500px;
But instead of 500px use the width of your menu
And to make it popout just override the
right: 0;
Making it 0 will make it stick to the right back to its original position
What you want requires a little more than just a couple of lines of css but I think this will give you a good start. Just style according to your theme:
HTML
<div id="oneout">
<span class="onetitle">
menu
</span>
<div id="oneout_inner">
<center>
menu info here
<br>
</center>
</div>
</div>
CSS
#oneout {
z-index: 1000;
position: fixed;
top: 64px;
right: 1px;
width: 18px;
padding: 40px 0;
text-align: center;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#oneout_inner {
top: 60px;
right: -250px;
position: fixed;
width: 230px;
padding: 10px;
background: #FFFFFF;
height: auto;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
border:1px solid #333;
}
#oneout:hover {
z-index: 1000;
right: 250px;
}
#oneout:hover #oneout_inner {
z-index: 1000;
right: 0px;
}
.onetitle {
display: block;
writing-mode: lr-tb;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
right: -11px;
top: 3px;
font-family: Lucida Sans;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
}
Here is a working DEMO
Related
My website loads and only after few seconds I get for example functionality.
For example I have
<a href="news.php" class="home-page--news-box-button-wrapper">
<div class="home-page--news-box-button-text-wrapper">
<span class="home-page--news-box-button-text">Sve vijesti</span>
</div>
<div class="home-page--news-box-button-arrow-wrapper">
<span>here goes arrow</span>
</div>
</a>
And css has a simple transition
.home-page--news-box-button-wrapper {
background-color: $red;
transition: background-color 100ms;
&:hover{
background-color: $brown;
.home-page--news-box-button-arrow-wrapper {
text-align: center;
height: 43px;
transform: translateX(5px);
}
}
And hover only triggers after few seconds.
Did anyone had this problem before
so I have this problem with jQuery .animate() function where I animate one element and it displaces all other elements associated with it.
This is the menu I am working with:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 navbar">
<ul>
<li id="home_button" class="menu_button">
<i class="fa fa-home"></i>
<p>Home</p>
</li>
<li id="projects_button" class="menu_button">
<i class="fa fa-pencil"></i>
<p>Projects</p>
</li>
<li id="about_button" class="menu_button">
<i class="fa fa-balance-scale"></i>
<p>About</p>
</li>
<li id="contact_button" class="menu_button">
<i class="fa fa-user"></i>
<p>Contact</p>
</li>
</ul>
</div>
</div>
To see what I mean, I transferred my code into jsfiddle
Any help is appreciated!
This is normal HTML behaviour. Browsers "flow" the layouts, so if you make one element bigger, it reflows the rest of the document and displaces elements where it needs to.
If you want an element to move from one position to another, you have to take it out of the normal layout. You can do this by setting the position CSS attribute of the element to something other than relative. For example position: absolute makes the element positioned relative to the whole document, position: fixed makes the element positioned relative to the window's border, etc.
Additionally, you can use CSS transforms which also don't affect layout. These allow you to do a combination of translation, rotation and scaling to an element without displacing it's nearby siblings. This is ideal for, say, a slight size increase on mouse over or to transition items in from off screen.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Either way, I strongly recommend using CSS animations and transitions, rather than jQuery animate. You can then use jQuery to apply classes to enable and disable animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://developer.mozilla.org/en/docs/Web/CSS/#keyframes
$('.animation-test').on('click', function() {
$(this).toggleClass('animation-test--enabled');
});
* {
font-family: arial, helvetica, san-serif;
}
.transition-test {
padding: 20px;
background: cornflowerblue;
transition: transform 200ms ease-in-out;
}
.transition-test:hover {
transform: scale(1.1);
}
.animation-test {
padding: 20px;
background: salmon;
}
.animation-test--enabled {
animation: identifier 1s infinite;
}
#keyframes identifier {
0% { transform: translateX(0); }
33% { transform: translateX(20px); }
66% { transform: translateX(-20px); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transition-test">Hover over me to see a transition on a transform scale (no Javascript required)</div>
<br/>
<div class="animation-test">Click me to toggle an animation (Javscript applies and removes the class)</div>
In addition to this breaking your layout, you'd also have to consider a way to stop and reverse the animation midway or else it'll keep going and potentially repeat if the user comes back to it. Try moving your mouse back and forth across all the buttons really fast on your fiddle to see what I mean. It's entertaining, but not the effect you want I think.
Fortunately not everything needs to be solved with javascript. CSS transitions are easy to understand and do all the hard work for you. Combine it with psuedo selectors and you'll get the effect your looking for.
CSS Transitions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Psuedo Classes:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
.menu_button{
transition: .250s width;
}
.menu_button:hover{
width : 100px;
}
.menu_button{
transition: .250s width;
}
.menu_button:hover{
width : 100px;
}
/** Note so important **/
ul {
list-style: none;
}
.container-fluid {
margin: 0;
padding: 0;
}
.photo-placeholder {
height: 350px;
background-color: green;
}
/* Navbar menu */
.menu_button {
width: 35px;
height: 35px;
display: inline-block;
margin-top: 15px;
margin-right: 10px;
border-radius: 20px;
}
#home_button {
background-color: red;
}
#home_button i {
margin-left: 0.6em;
margin-top: 0.5em;
}
#projects_button {
background-color: blue;
}
#projects_button i {
margin-top: 0.5em;
margin-left: 0.6em;
}
#about_button {
background-color: yellow;
}
#about_button i {
margin-top: 0.55em;
margin-left: 0.55em;
}
#contact_button {
background-color: green;
}
#contact_button i {
margin-top: 0.5em;
margin-left: 0.75em;
}
stretch {
width: 80px;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 navbar">
<ul>
<li id="home_button" class="menu_button">
<i class="fa fa-home"></i>
<p>Home</p>
</li>
<li id="projects_button" class="menu_button">
<i class="fa fa-pencil"></i>
<p>Projects</p>
</li>
<li id="about_button" class="menu_button">
<i class="fa fa-balance-scale"></i>
<p>About</p>
</li>
<li id="contact_button" class="menu_button">
<i class="fa fa-user"></i>
<p>Contact</p>
</li>
</ul>
</div>
</div>
</div>
</body>
I am working on a Bootstrap-project with some anchors-links. After clicking them my css doesn't work anymore.
HTML:
<a class="navbar-brand" href="#SectionID">GoToSection</a>
<div class="jumbotron">
<div class="container">
<h3 id="SectionID">Section With ID</h3>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more ยป</a></p>
</div>
</div>
CSS:
.jumbotron::before {
margin-top: -13.4505%;
top: 0;
transform: rotate(-7.73deg);
transform-origin: 100% 100% 0;
}
.jumbotron::before, .jumbotron::after {
background: white none repeat scroll 0 0;
content: " ";
display: block;
height: 0;
padding-top: 13.4505%;
position: absolute;
right: 0;
width: 100.917%;
}
*::before, *::after {
box-sizing: border-box;
}
.jumbotron::after {
top: 100%;
transform: rotate(7.73deg);
transform-origin: 100% 0 0;
}
.jumbotron {
overflow: hidden;
position: relative;
}
You can see it in this fiddle.
Afer clicking on 'GoToSelection' the .jumbotron looses it's padding-top. When I disable and then enable the property with firebug it woks again.
There is nothing wrong with CSS or HTML.
The jumbotron is not loosing its padding either. What's actually happening here is that. when you click on the link "GoToSection" which has a href value "#SectionID", it is actually scrolling to the
<h3 id="SectionID">Section With ID</h3> .
I have a navigation bar and a sub-navigation bar in my app. In the sub bar it's possible to press on a button and I want this button to open a new sub bar which will hide the original bar.
The new sub bar should slide from behind the main bar and hide the second bar.
Problem is:
When the third bar appears it bounces instead of appear smoothly
When the third bar disappears it just disappears and doesn't slide back up as I would expect
I tried playing with the top property thinking it might solve the issue, but it hasn't.
I'm attaching here the snippet. Or you can view it in jsfiddle
angular.module('myapp.controllers', []);
var app = angular.module('myapp', ['myapp.controllers', 'ngAnimate', ]);
angular.module('myapp.controllers').controller("BarController", function ($scope) {
$scope.showActionsBar = false;
$scope.cancelAction = function () {
$scope.showActionsBar = false;
}
$scope.click = function () {
$scope.showActionsBar = true;
}
});
.navbar-deploy {
background-color: red;
border: solid transparent;
}
.third, .sub-navbar-fixed {
background-color: black;
width: 100%;
height:60px;
padding-top: 18px;
margin-bottom: 0px;
z-index: 1000;
color: white;
}
.actions-bar {
top: 40px;
background-color: yellow;
position: fixed;
padding-left: 0px;
z-index: 1001;
}
.sub-bar {
padding-top: 40px;
}
.third-in, .third-out {
-webkit-transition:all ease-out 0.3s;
-moz-transition:all ease-out 0.3s;
-ms-transition:all ease-out 0.3s;
-o-transition:all ease-out 0.3s;
transition:all ease-out 0.3s;
-webkit-backface-visibility: hidden;
}
.third-in.myhidden-remove, .third-out.myhidden-add.myhidden-add-active {
display: block !important;
top: -2000px;
z-index: 0;
}
.third-out.myhidden-add, .third-in.myhidden-remove.myhidden-remove-active {
display: block !important;
top: -80px;
z-index: 1001;
}
.myhidden {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app="myapp">
<div ng-controller="BarController">
<div class="navbar-deploy navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="col-lg-2">First Toolbar</div>
</div>
</div>
<div class="sub-bar">
<div class="sub-navbar-fixed" ng-cloak>
<div class="container-fluid">
<span>
<a ng-click="click()"><span> Second Toolbar</span>
</a>
<div class="actions-bar third third-in third-out" ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
Try this:
.myhidden{ top:-2000px; }
To be honest.. I know why the "bounce". Your yellow container is placed (with visibility:hidden) at the final position (when visible). When you start your animation the menu first go to top (origin of the animation) and then down.
To fix it you may probably position the yellow container when not visible under the black menu but... Imho your html is quite a mess (I don't mean any offense) as your container is place inside an span which contains the buttom and it's a children of the red menu... and that changing all that may mess up everything.
But your menu effect is easy to do it from scratch with nothing but very simple css, html and jquery. This is how I would do it in case it may help you if you are up to change your code.
With this html (the order of the elements are set to avoid the use of z-index)
<div class="header">
<div class="header-bot">
<span class="show">second toolbar</span>
</div>
<div class="header-extra">
<span class="hide">back</span>
</div>
<div class="header-top">
<span>first toolbar</span>
</div>
</div>
this css:
body {margin:0;padding:0;}
span {color:#fff;}
.header {
width:100%;
position:fixed;
top:0;
}
.header-top {
background-color:black;
height:50px;
position:absolute;
top:0px;
width:100%;
}
.header-bot {
background-color:red;
height:50px;
position:absolute;
top:50px;
width:100%;
}
.header-extra {
background-color:yellow;
height:50px;
position:absolute;
top:0;
width:100%;
transition: all 0.3s ease;
}
.down {
top:50px;
}
.hide {color:#000;}
and just this jquery (to add or remove a class when click on the buttoms):
$(document).ready(function () {
$('.show').click(function () {
$('.header-extra').addClass("down");
});
$('.hide').click(function () {
$('.header-extra').removeClass("down");
});
});
You may have something simillar to what you are looking for. Hope this can help anyway.
FIDDLE
Just remove class third-in and third-out from div element it will stop bouncing effect.
<div class="actions-bar third " ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle