I have asked a few questions about this project before. I have created a mock webpage as part of a class evaluation.
You can find the page on my github here: dtarvin.github.io/davidTarvinEvaluation/index.html
There's a nav menu at the bottom right corner of the page. When you highlight over one of the menu items, a paw icon slides in under the menu item, and the menu item moves up vertically. Then when you move to another item, the paw slides to that next item, which moves up vertically, while the previous item moves back down to its original position.
Two problems: First, when I have the paw under an item, if I have my cursor pointer to the left or right of the paw the menu item stays raised in height. However, if my pointer is on the paw itself, the menu item returns to its original position. How do I fix this?
Second, when I move from one menu item to another, say from Home to About, the Home drops down before the paw has moved out from under it, so that the paw ends up dragging across the word Home. Is there any way to fix it so that this does not occur?
Thanks!
1) add the css property of pointer-events: none; to #paw.
#paw {
//other properties...
pointer-events: none;
}
2) add a top property value for li span when not hovered and add a transition delay.
li span {
position: relative;
transition: top .5s 0.5s; //this has a 0.5s delay
top: -0vh;
}
Related
I have a react app that basically is a container with 2 columns. The left column is a list and the right column is a div with position sticky(It's actually a map with pins. Must be fixed on the screen). Each list item is a clickable in the right column. When the user clicks on the title, the screen must be scrolled to display the current list item on left column.
The problem is that when the screen scrolls to an item at the end of the list, the right column also scrolls and doesn't stay fixed.
I would like to keep the right column always fixed when the user clicks on some title, regardless of the element's position in the left column list.
Any idea how to fix it?
https://codesandbox.io/s/scrolling-with-react-yq81r
I change a couple of code on CodeSandbox.
.right {
background-color: #cacaca;
}
.right ul {
top: 0;
position: sticky;
}
If I understood correctly this gonna work.
I am trying to create a simple off-canvas "push" menu. When the menu trigger is clicked, the menu slides in from the right of the viewport and pushes the main content divs offset by the width of the menu.
The jQuery works (in that is pushes the menu onto the page, and pushes the content off the page) but the animations do not work as expected. There is some "catchup" where the menu moves slower than the main content areas.
I set a transition-delay to fix this issue but it doesn't seem to have had the effect I thought it would.
How do I managed to get the content divs to move offscreen so that it looks like they are pushed by the menu?
Here is an example of my issue: http://codepen.io/anon/pen/GrKJor
Here is my code:
$('.nav-trigger').click(function(){
$('nav').addClass('nav--open');
$('header').addClass('content--pushed');
$('main').addClass('content--pushed');
$('footer').addClass('content--pushed');
});
And here is the CSS for the transition:
nav {
...
right: -300px;
transition: right 0.2s ease-in;
}
.nav--open {
right: 0px;
}
.content--pushed {
position: relative;
right: 300px;
}
The issue is you're attempting to animate a property - specifically, right position - in a way that will only work in your markup structure if the element being animated has a position:fixed.
You can see the desired behavior in this forked CodePen:
http://codepen.io/anon/pen/ygBNXG
(I also added a 'nav-close' button so you can see the inverse & test repeatedly)
By applying a fixed position to the header, main & footer, the transition effect can indeed be animated:
header, main, footer {
position: fixed;
/* other CSS */
}
To account for the fixed position, I've then offset the top position of main & footer based on your defined heights:
main {
top:100px
}
footer {
top:200px
}
Finally, and this is only preference, I made the left position of header, main & footer be what changes (from 0 to -300px) as that seems to more accurately reflect what's happening, which is those elements are being moved off the left edge of the viewport by 300px.
Update
If you don't want to use position:fixed on the elements, you need to modify your markup structure to wrap the header, main & footer elements and place the nav element outside of said wrapper. This is working sans fixed position and heights/offsets here:
http://codepen.io/anon/pen/qREvEB
The revised markup is essentially:
<div class="wrapper">
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
<nav>...</nav>
In this scenario, the positions of the header, main & footer can be reset to relative and the content is all scrollable as needed.
I am trying to use jQuery's fadeIn/fadeOut effects on images that are being used as buttons in an unordered list. I want to be able to have the hovered image fade in quickly and out slowly on mouseout. The problem I am having is that I am trying to do this as horizontal menu with floated <li> tags. I created a jsfiddle with as simple of an example as I could. The list in the example contains only 1 list item, but it will actually have 4 or 5.
In order to position the hover images I have created a second <ul> so that it is positioned on top of the other list. What is happening now is that when hovered it does the fadeIn fadeOut twice. I assume that this is happening once for each of the <ul>.
Is there something I can do to position two images on top of each other, within the same <li>? Or another(better) way altogether to accomplish this? Any help is appreciated.
DEMO
You can get rid of the second <ul> by putting the two images within your #menu1, and then adding this few properties to your CSS:
#menu1 {
position: relative;
}
#hovbutton1 {
position: absolute;
top: 0;
}
That way you're positioning your hover image in an absolute position relative to its parent, so when shown, it will appear on top of the other one.
Here's the jsFiddle, hope it helps.
I'm using a nice Mega Menu from CODROPS and I'm trying to customize it to have:
1) a slideToggle effect
2) When the menu is opened to push the below div element down (IE: not overlapping the below elements)
Here is my JS FIDDLE
This is what I've done so far:
1) I know very basic jquery and usually I know how to apply a slideToggle effect but I can't seem to get it right with their javascript code, so I'm left guessing where to place it but having no success. I've tried researching online but can't find a solution.
2) To make the element below the menu get pushed down, I know to make the position relative in the css below but that just breaks the menus float when it's activated.
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
It would be nice to have the elements below pushed down but the slideToggle effect is a bit more important to me...
You'll have to refactor this a bit to get it to work the way you want it to.
The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.
However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.
I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.
I have a menu bar, whose menu li stretch down on mouse hover. It pushes sidewards a div below this menu bar div. But I want those stretch down lis to display over the mentioned div, without pushing it sidewards.
You can have a look at what I am trying to tell here.
Anybody got a solution?
http://jsfiddle.net/bpu2r/
I've simply added float: left; to the menu and clear: both; to the container.