I'd like to make a menu bar on a website using a set of anchor elements. So far everything is exactly working as planned.
Now i want an image to follow the users selection. So the image is at the current active menu item, but when the user hovers their mouse to another menu item, the image will follow to that particular item.
I tried searching the web for it but i get a lot of simple hover effects, not the one I want. So maybe one of you can help me with an example or give me a push in the right direction.
My menu is made like this
<nav id="page-nav">
item #1
item #2
item #3
<!-- etcetera -->
</nav>
I'm now using CSS to make it into a menu bar.
a {
display: inline-block;
position: relative;
width: 156px;
height: 37px;
top: -1px;
text-align: center;
line-height: 41px !important;
color: #c3c3c3;
text-decoration: none;
text-shadow: 1px 1px 0px black;
text-transform: uppercase;
font-family: "Myriad Pro", "Calibri", sans-serif;
font-size: 16px;
letter-spacing: 1px;
}
I want the image to follow the users action. If i use the image as a background on the buttons, it is not possible to make it slide from one item to another...
Thanks!
demo
I made a little nub, but you can give it a background image, or replace it with an image, or whatever. It uses CSS transitions, so it will teleport on oldish browsers.
.blip {
position: absolute;
border-radius: 50%;
background: rgba(100, 100, 255, .4);
width: 40px;
height: 20px;
top: -10px;;
left: -100px;
-webkit-transition: left .5s ease-in-out;
-moz-transition: left .5s ease-in-out;
transition: left .5s ease-in-out;
}
If you don't want to use CSS transitions, replace the .css with .animate.
var $blip = $('.blip');
$('#page-nav>a').on('mouseover', function(){
$blip.css({
left: $(this).offset().left
- $(this).parent().offset().left
+ $(this).width() / 2
- 20 // 20 is one half of .blip's width
});
});
$('#page-nav').on('mouseout', function(){
$('.blip').css({left: -100});
});
Related
I'm trying to make a navigation button for my website that only appears when the site's at a certain size. It disappears and reappears when needed, but does a slide-in and -out animation that I definitely didn't code, and also lingers for ~0.5 seconds before disappearing. The nav button is also connected to simple Javascript that's supposed to bring up a pop-up overlay menu. I'm trying to get rid of both the resizing animation and the lingering 0.5 seconds.
The HTML for the button:
<button id="navbutton" onclick="openNav()">nav</button>
The CSS relating to the navbutton (note: everything I know about coding a website, I learned within the past 24 hours - if the code looks messy, that's because I don't know what I'm doing):
#navbutton {
width: 70px;
visibility: hidden;
background-color: #FFF6EA;
color: #545454;
border: 2px solid #545454;
padding: 13px;
text-align: center;
text-decoration: none;
float: right;
font: bold 16px/10px "IBM Plex Serif", serif;
margin: 4px 2px;
margin-left: 10px;
cursor: pointer;
border-radius: 30px;
}
#navbutton:hover {
background-color: #545454;
transition-duration: 0.4s;
color: #FFF6EA;
}
#media screen and (max-width: 850px) {
#navbutton {
visibility: visible;
margin-top: 20px;
}
}
The Javascript that connects to the overlay menu (the "navigation" div and "closeNav" button aren't linked here; I don't think the .js has anything to do with the unwarranted navbutton animations, but I'm adding it anyway in case it does):
function openNav() {
document.getElementById("navigation").style.display = "100%";
}
function closeNav(){
document.getElementById("navigation").style.display = "0%";
}
Also, the nav button currently doesn't do anything when I click it, despite it working a couple hours ago. I probably accidentally removed a detrimental piece of code, but that's not the point of this question - I'll figure it out/ask in another post. But if anything seems out of the ordinary, feel free to point it out.
I tried putting an extra float: right; after the navbutton turns visible, even though I know logically it doesn't do anything since it's already in the class (but a guy's desperate). I've also tried position: absolute; (and relative), because I thought "maybe this will make it stay in place and not move," but the animation is still there. I also tried deleting the transition-duration, but it didn't work.
To whoever can offer insight: I will owe you my firstborn. Thanks.
If you don't specify a transition-property value, the default value is all, which means that all properties that have a different value before and after the transition will be animated. However, if you explicitly set a transition-property value, only the specified properties will be animated. So I think this is your problem.Try setting the transition properties to only background-color and color.
function openNav() {
document.getElementById("navigation").style.display = "100%";
}
function closeNav(){
document.getElementById("navigation").style.display = "0%";
}
#navbutton {
width: 70px;
visibility: hidden;
background-color: #FFF6EA;
color: #545454;
border: 2px solid #545454;
padding: 13px;
text-align: center;
text-decoration: none;
float: right;
font: bold 16px/10px "IBM Plex Serif", serif;
margin: 4px 2px;
margin-left: 10px;
cursor: pointer;
border-radius: 30px;
transition-property: background-color, color;
transition-duration: 0.4s;
}
#navbutton:hover {
background-color: #545454;
color: #FFF6EA;
}
#media screen and (max-width: 850px) {
#navbutton {
visibility: visible;
margin-top: 20px;
}
}
<button id="navbutton" onclick="openNav()">nav</button>
It's a nitpicky design thing but I basically have this element above my contact button below that makes makes list elements pop a little (using transforms and other rudimentary CSS animations knowledge that I pieced together), but now the button below stutters/jumps every time the above animation is triggered.
I am using zero JavaScript for this particular exercise (Just HTML/CSS) and I'd like to keep it that way but if it's a quick & small fix using JavaScript - then sure why not.
The HTML Sections in Question:
<div>
<ul class="projectlist">
<li class="slidein">🎮 The Game</li>
<li class="slidein">🔨 The Toolbox</li>
<li class="slidein">📚 The Resource</li>
<li class="slidein">More projects...</li>
</ul>
</div>
<div class="divbutton">
<h2>Contact</h2>
</div>
The CSS related to the transforms for SlideIn:
.slidein:hover {
animation-duration: 0.2s;
animation-name: slidein;
animation-iteration-count: 1;
animation-direction: normal;
}
#keyframes slidein {
from {
font-size: 19px;
translate(0,0);
}
to {
font-size:20px;
translate(10,0);
}
}
CSS related to the contact button for additional info if you need it:
.divbutton {
text-align: center;
position: relative;
}
a {
text-align: center;
border-radius: 35px;
border: 2px solid #73AD21;
width: 150px;
height: 60px;
display: inline-block;
text-decoration: none;
color: black;
padding: -20px;
}
a:hover, a:active {
background-color: #59b515;
color: white;
}
.projectlist {
text-align: center;
font-family: 'NowRegular';
font-size: 19px;
list-style: none;
margin-right: 25px;
}
Here is also a video of the problem if you need it: Youtube
Just the way the contact button skips there at the bottom.
I've already tried simple simple stuff like position fixed, absolute and all those and it didn't work.
That happens, because the animation changes the line-height of the links.
This should fix it:
.slidein {
line-height: 24px;
}
Edit:
The animation should be configured on the class, without ":hover", otherwise the animation will only trigger if the mouse is on the element. when the mouse leves the element, the animation just does not end and it jumps to the default state.
A keyframe animation is not needet. you can just define the bigger font on the ":hover" selctor.
take a look here: https://codepen.io/unnamed-5-8-13/pen/mdmeMWq
I'm looking for a way to animate my text box so that it slides into frame from the right side at (x) amount of time. So far, I haven't found any online resources that could help me with this animation.
For now, I just have a simple (absolute) box.
.taskbox {
width: 230px;
padding: 15px;
position: absolute;
right: 25px;
top: 25px;
background-color: black;
color: white;
font-family: courier new;
font-size: 20px;
}
<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should investigate!</div>
Note: Not too sure if this will require JavaScript, but I have preexisting functions for elements not involved in my question. If my script is needed, I'm more than happy to update my post.
Thanks in advance for your help!
This can be done with CSS only with animation you can specify a duration as well as a delay (in your case x). Paradoxically to make an element slide from the right it easier to positioned it with the left property. Like so…
.taskbox {
width: 230px;
padding: 15px;
left: 100%;
position: absolute;
top: 25px;
background-color: black;
color: white;
font-family: courier new;
font-size: 20px;
animation: slide-from-right .4s 2s forwards; /* x = 2s */
}
#keyframes slide-from-right {
to {
left: calc(100% - 230px - 30px - 25px);
/* 100% = total width, 230px = element width, 30px = left and right padding, 25px = distance from right border */
}
}
<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should investigate!</div>
You could animate transform: translate:
.taskbox {
width: 230px;
padding: 15px;
position: absolute;
right: 25px;
top: 25px;
background-color: black;
color: white;
font-family: courier new;
font-size: 20px;
transform: translate3d(calc(100% + 25px), 0, 0);
animation: slide-in 0.5s 1s cubic-bezier(0.3, 1.3, 0.9, 1) forwards;
}
#keyframes slide-in {
to {
transform: translate3d(0, 0, 0);
}
}
<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should investigate!</div>
In case you're wondering why I'm using translate3d, it triggers hardware acceleration. Check out this article if you're interested.
I want to add the navbar toggle button as given in the image
in my html page.
However, bootstrap gives us the option to create buttons such as this
I do not want any normal button and specifically want the first image.
Is there a way to do this?
The final answer has been split to 2 parts:
The initial code that was worked on. And final result that was used.
Both can be used to create a menu icon that looks like the "navbar-toggle" button. But is always fixed on the screen!
INITIAL TRIAL CODE
Makes use of <span> as in Bootstrap.
Positioned on Top Right.
CSS targeted (can change colour) and responsive.
.ham-menu, .ham-menu span {
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
cursor: pointer;
}
.ham-menu {border: 2px solid #666; width: 32px; padding: 1px; border-radius: 3px; position: absolute; right: 5px; top: 5px; }
.ham-menu .line {border: 3px solid #666; line-height: 0; font-size: 0; display: block; margin: 2px;}
.ham-menu .line.small {border-width: 2px;}
.ham-menu:hover {border-color: #99f;}
.ham-menu:hover span {border-color: #ccf;}
<div class="ham-menu">
<span class="line"></span>
<span class="line small"></span>
<span class="line"></span>
</div>
<p>Hover and See</p>
When the screen size is small (both toggle buttons are visible
When the screen size is large (the left toggle icon remains)
I have a sprite image for each list item (home, services and contact). I'm using CSS to move the position on hover. It works fine except I would like fade the transition instead of rapidly moving the position. I am trying to make it look like the button is being pushed in on hover. I would like to slow it down. I have been all day on this and not getting anywhere. Thanks for any help!
HTML
<ul id="navigation">
<li class="link1">Home</li>
<li class="link2">Services</li>
<li class="link3">Contact</li>
</ul>
CSS
li.link1 {
text-indent: -9999px;
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;
}
li.link2 {
Repeats itself...
Could you do it with relative positioning and CSS3 transitions?
li.link1 {
position: relative;
text-indent: -9999px;
background-image: url(http://www.rjdesigns.net/temp/images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
transition: margin 0.25s;
-moz-transition: margin 0.25s; /* Firefox 4 */
-webkit-transition: margin 0.25s; /* Safari and Chrome */
-o-transition: margin 0.25s; /* Opera */
}
li.link1:hover {
background-position: left bottom;
// These lines add height to the top of the li, so it doesn't
// glitch/vibrate if you hover on the top pixel or two
border-top: 2px solid transparent;
top: -2px;
// Increase margin by 2px on top and left
// Decrease by 2px on right so you don't shift other menu items
margin: 2px -2px 0 22px !important;
}
Demo:
http://jsfiddle.net/jtbowden/gP9kD/
Update Demo with all three links and simplified CSS for the li elements:
http://jsfiddle.net/jtbowden/gP9kD/1/
jQuery
If you want a true fade effect, you can do this with jQuery. I hacked together an example here:
http://jsfiddle.net/jtbowden/gP9kD/4/
This example creates clones of each li changes the background-positioning, and absolutely positions them under the current li elements and hides them. Then on hover, it fades the main li out (to almost zero, so it still stays active), and fades in the one underneath.
It is a little hacky, because the li clones still contain the link, etc. But it works, and demonstrates the principle.