I am trying to build a sidebar navigation like the one used in the Wordpress admin dashboard. I like the option to collapse the sidebar but still see the icons. I'm using Zurb Foundation and jQuery. I finally have a solution that I think might work, but it's doing some funny things. The <li>s are all different widths, until I collapse and reopen the menu for the first time. Then they all stay the same size. So here are my questions:
How can I make the lis be the same size on the first load?
How can I make the main content resize and push over when the sidebar opens (instead of getting pushed down, which is what is currently happening)?
I want the sidebar to appear open on the first page load (with icons and titles), but then if the user toggles it closed (to just the icon view), it should stay closed as they navigate the site. How do I do that?
Here's a jsFiddle with my code.
Here you have a tutorial to do this, and works like a charm, you only need to adapt it to Foundation tutorial
In your particular case, since you want to have teh icons always visible, just open components.css and replace
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 0px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
with
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 60px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
Related
I'm working on an iframe where I'm trying to overlay the iframe on top of a web page. The iframe is a floating button that remains on the bottom right of the webpage no matter where the user is on the page. The issue I'm having is that while scrolling works perfectly, the buttons and links on the base html page (where the iframe is called) are not functional anymore. The code for the iframe is here:
<iframe src="ka.html" title="KA"
style=" padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom; right: 0px;"
height="100%" width="100%">
</iframe>
How can I get the base layer functionality working? I really appreciate any help I can get.
I am having trouble positioning Menu Icon inside div. I am using Responsive full overlay navigation menu from https://navnav.co/ .
I am using this in my personal website but the menu icon is always at top-right of the page.
What i am trying to do is, when my website loads, i am displaying a full cover wallpaper.
and after scrolling down i have a navigation menu after the wallpaper ends.
I want to put that menu icon in that div only and not in top right of webpage.
.cd-nav-trigger {
/* hamburger icon */
position: fixed;
z-index: 3;
top: 12px;
right: 5%;
height: 44px;
width: 44px;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
}
I have created a demo jsfiddle please check it. Its just a prototype.
https://jsfiddle.net/szn0007/zwds84ec/
Please also refer the screenshots.
In your fiddle, remove the position attribute
.cd-nav-trigger {
/*position: fixed;*/
}
This will position your menu icon wrt the menu container. position: fixed positions it wrt the page
I have a serious issue with my dropdown settings on iOS Safari. Imagine a website, which has a header on the top. If you click the header, it will slide down, just like any notification center on mobile phones. The way I chose was quite simple. I have a <div class="settings hide"> with this css:
.settings{
position: fixed;
width: 100%;
height: calc(100vh + 60px);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10;
}
.hide{
top: -100vh;
}
Now, this makes it look like so:
Now, the next step was to create it "slide-able" which I've done using jQuery, by adding class called "show".
.show{
top: calc(0vh - 60px);
}
And this actually made it great. It just worked! Suddenly I tried the website on my iPhone, and because of the bottom bar, always showing until you scroll, my hipe was all gone.
Because it look like this:
Getting it so far? My menu did slide correctly, looks great in any browser, but here in Safari, it is hidden right behind the bar, so user actually can't close it.
I tried my best to solve this issue, butnothing really worked as I wanted.
PS: I assume you know that, but it kinda works when you use bottom: 0;, then it "knows" about the bar and stops correctly right above it. But because the setting is calculated with top position, it does not do the animation, which is necessary for my design.
Any help/solution appreciated!
David, unfortunately iOS Safari is full of unpleasant surprises.
One of them is what iOS Safari considers 100vh.
Viewport height in iOS Safari is not equal window inner height as in Chrome or Firefox.
E.g. on iPhone 7plus 100vh == 696px, but window.innerHeight == 628px.
On iPhone 6 100vh == 628px, but window.innerHeight == 559px.
And so on...
So the solution is getting rid of 100vh.
Assuming that body is offset parent of .settings use 100% instead:
.settings {
position: fixed;
width: 100%;
height: calc(100% + 60px);
...
}
.hide {
top: -100%;
}
Also you do not need to use calc in your .show class (since 0vh === 0):
.show {
top: -60px;
}
I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am completely new to the jquery scene, and so am having some trouble trying to figure this out. My problem is:
I am creating a website for a project, and this website is based of a square (700px by 700px) that has been divided into 4 smaller squares - all 350px by 350px.
What I want to do is have each of these smaller squares have a panel covering them, that when clicked, move away to reveal the content behind them. The two panels on the left side would slide to the left and disappear, and the two on the right would slide to the right and disappear.
If possible I would like only one panel to disappear at a time. So as one would click a new panel, the previous one would slid back into position, hiding its content again.
Any help would be greatly appreciated!
There are many ways to do the sort of thing you're interested in. CSS transitions have already been mentioned. I've included a working example but it is very basic - it should get you moving in the right direction. Please take a look at the links below - they've got a lot of great information.
If you have four elements, and the main function of the covers is just to cover, you could use :after (or :before) CSS pseudo-elements. Here's what that HTML markup could look like if your panels were li elements:
<ul>
<li id="panelOne">One</li>
<li id="panelTwo">Two</li>
<li id="panelThree">Three</li>
<li id="panelFour">Four</li>
</ul>
Since the covers are only there to hide your four panels and they're pseudo-elements, you'd style them in your CSS. You could start by styling your HTML elements:
ul {
display: block;
background: black;
width: 700px;
height: 700px;
margin: 0 auto;
}
li {
float: left;
position: relative;
background: white;
border: 1px solid black;
width: 350px;
height: 350px;
}
Then style your :after covers:
li:after {
display: block;
/*the background color is just to make the covers more visible */
background: red;
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 350px;
content: "";
}
If you use jQuery to add a class (for example, ".clicked") to one panel at a time, you'd style the .clicked pseudo-elements so they move to the left or right:
li#panelOne.clicked:after, li#panelThree.clicked:after {
-webkit-transform: translateX(-350px);
-moz-transform: translateX(-350px);
-ms-transform: translateX(-350px);
-o-transform: translateX(-350px);
transform: translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
-webkit-transform: translateX(350px);
-moz-transform: translateX(350px);
-ms-transform: translateX(350px);
-o-transform: translateX(350px);
transform: translateX(350px);
}
And use jQuery to add or remove the class:
$( 'li' ).click(function(){
//first remove the class from ALL panels
$( 'li' ).removeClass( 'clicked' );
//then add to the panel that's been clicked
$(this).addClass( 'clicked' );
});
And one more step: since you want the covers to slide to the left or right, you'll need to add CSS transitions to achieve that. You'd place them in your :after pseudo-element styles:
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
And here's how that would all look in a jsfiddle: http://jsfiddle.net/rt9d5/10/embedded/result/
Try using the Jquery UI Accordion http://jqueryui.com/accordion
You can create multiple collapsible panels and set whether it to have one panel open at a time (or multiple if you want).
My Suggestion would be to look at this, do a little research, and if you have any more questions post a more specific question on stackoverflow.