So, I'm trying to create a javascript or query to hide a right sidebar div. Proving to be a lot harder than I anticipated but I'm close.
I've created a hide/show right sidebar that slides out when clicked and then slides back to full width when the button is clicked again.
Problem:
When clicked "Hide":
Sidebar slide out to be 'width:10px;' and the content to be margin-right:10px;
When clicked "SHow":
Sidebar slide in to be 'width:200px;' and the content to slide back to 'margin-right:200px;
I've created a JS Fiddle to show:
http://jsfiddle.net/6uVvF/
I am trying to accomplish an animated version of face books right sidebar.
Here's also another example: http://www.sidlee.com/
Thanks.
So I was able to create a sliding and fading effect on the sidebar.
It allows me to hide a sidebar. I am having the Javascript animate each item to 0 though. But it works well.
See the working version here:
http://jsfiddle.net/glepage/6uVvF/
Related
I've searched high and low to figure this one out. Basically, I've got a full screen slide-out menu on my website which displays links to 4 pages of the website (ie. Home, About, Where, and Help pages). It's the main navigation, which slides out from a hamburger menu icon. It works fine and dandy at the top of any page, but after smooth scrolling down to the second section of any page and clicking the fixed menu icon, the menu slides out only to display the navy blue background, without any of the links. It's as though the background extends down to section 2 but the links are stuck at the top. Any assistance would be AMAZING as this is for a uni assignment due in 2 weeks.
Here is a link to the current (draft) website: https://jessjonesgraphics.000webhostapp.com
Here is an image to show you what I mean specifically: Image of issue
Thanks so much in advance!
Change the css of .slider-container .slider-parent to postion:fixed
The problem here is that its still sliding out with the links but since you are already scrolled down you are just getting the bottom blank blue of the slide out.
By switching the position from absolute to fixed no matter where the slider is pulled out on the page it will show the menu because its fixed on the viewport.
I'm in the making of a navbar that uses html, css and javascript. I recently came up on a problem when I was making the navbar responsive and I need help. Here is a link to codepen: https://codepen.io/Linus_Ekman/pen/WMeJvv where I pasted all my code so that you can see better what I mean and try to help me. So everything works well except that when I click on the "hamburger" icon a dropdown should appear under the navbar that stretches over the whole width of the page with the 4 navigation options in a column. Here is an example of what I want it to do when the "hamburger" icon is clicked: https://codepen.io/Linus_Ekman/full/wywjoB/
Tell me if you need any more information
Edit:
The dropdown now works the way it should as you can see in the first codepen link. But there is another problem. If you hover your mouse under the "hamburger" icon when the dropdown is up you can see that the links are there wich means that the navbar is there but just not shown. How can I get them to go away?
I was looking your example and, if you add some rules to your show class (ul.show), you can make it work:
You need to set background-color: #fff and left: 0 and you'll be good to go.
I forked your pen and you can check the code here https://codepen.io/fermijs/pen/aqoGyG
I am running into an issue. I am creating a simple fixed sidebar (similar to Facebook's sidebar on the right-hand side)
In Facebook when you interact with the sidebar 2 things happen
A scrollbar appears when the contents need to be scrolled
When you hover or click a name a popover appears to the left
I am having an issue with the popover conflict with overflow. As from what I understand to get the sidebar to scroll the overflow must be set to scroll on the parent div, this hiding any elements appearing outside of it.
I am using Twitter Bootstrap to build my sidebar and have created a JSFiddle here of a working example
http://jsfiddle.net/bNFAf/5/
The problem with my example is that when I click on the Icon <i class="icon-cog icon-white"></i> to activate the dropdown-menu, it gets cut off due to the overflow set on the #sidebar div.
Does anyone have any advice on how to get this working? If possible to do without jQuery and just CSS, great! Otherwise, jQuery could work.
DEMO - http://jsfiddle.net/bNFAf/5/
Fiddle
This uses bootstrap popover it allows for positioning left so that the options fly out over the menu.
$(document).ready(function(){
$('.icon-cog').popover({
placement: 'left',
html: 'true',
trigger: 'click',
container: 'body'
});
});
You could use JQuery Drill Down Ipod Menu
I'm trying to make a jQuery dropdown (more like drop right!) menu. What I need is that when the mouse is over the home button (for example), the other buttons slides out, and the content box slides in.
I want the black box (content) to slide in from the end of the button. Right, the box is sliding in from the left edge of the screen...but I don't want that box to be under the "home" button, I want it to be next to it.
Here's my fiddle : http://jsfiddle.net/TvNcD/
It's buggy right now...
But I think it's something fairly simple to fix.
Hope it works for you although I think there should be a better way to do this using CSS3...http://jsfiddle.net/TvNcD/18/
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!