Custom on hover and ul/li elements? - javascript

I'm new here, so please tell me if I formulated something wrongly, code or text-wise.
This is the code I'm currently using for my page. Yes, I know it's short and terrible, but I'm still learning HTML/CSS. If you run that on a page, you'll notice no hover events on the navbar buttons, and some fiddling with the logo will reveal that the actual navbar is a big bar. (width:100%?)
I was only wondering as to how I would go about creating an on hover that's only slightly there, something like this: (hovered on the left, not hovered on the right)
Hover showcase
I don't necessarily need it using my current setup or it being exact, but I'd like an explanation as to how this would be done. (the site I took it from has fancy fade on the text turning blue and a slide animation on the bar from the bottom, but I don't expect I'll be able to do that)
I was also wondering how I could have the logo be on the same bar as the other li elements, and then center it off how long logo + li elements (the whole bar) would be. (as opposing to having the li elements centered and a logo off to the left.) Also, a thick, colored bar above the navbar, but not below, like a margin, and having the navbar be a little thicker as well, as the picture above depicts fairly well.
Thank you for any assistance I can recieve!
Hyao

So for the hover color you can do something like:
li:hover {
color: blue;
border-bottom: 3px solid blue;
}
To add more of the animation you might want to do:
li {
display: inline-block;
vertical-align: middle;
}
li a:hover {
color: blue;
}
li a:after {
margin: 0 auto;
width: 0px;
height: 3px;
display: block;
content: "";
background-color: blue;
transition: width 0.5s linear;
}
li a:hover:after {
width: 100%;
}
li img {
padding: 14px 16px;
}
http://plnkr.co/edit/GrxqcRjoMa7aWjHvnBhA
basically you are creating a psuedo element :after which has an animation on its width. When you hover over an li element the psuedo element will grow to 100% of the width looking like an expanding underline.
To make the image inline with the other elements remove your position: absolute style for the #logo

Related

JS/CSS: how to animate a circle to pill shape?

Ok this is what I'm trying to achieve (ideally with JS/jQuery):
https://dribbble.com/shots/3445331-Expanding-Button
On hover, I need a circular div to expand into a pill shape so other buttons can pop in within it. When I click the "x" again, I need it to roll back to a circle shape.
I only know how to scale things with JS/jQuery. How can I do this? I can't find anything just searching with plugins.
Instead of thinking that it is a circle to a pill shape, maybe try making it a square div, that changes the width to more of a rectangle on hover.
Then you would only have to make the border-radius rounded to look like a circle/pill shaped. Hope that makes sense.
#mari Lai is right on. If you think of the containing div as a single rectangle with a changing width and consistent border radiuses then it's really pretty straight forward. (you can trigger this with jQuery/JS or simply hover/focus css)
Something like this...
.pill {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #898989;
transition: width .5s ease;
}
.pill:hover, .pill:focus {
width: 240px;
}
<div class="pill">
</div>
So that "circle" in the beginning is a div with class circle, say with the following CSS:
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
}
Then you could change that to the following:
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
transition: width ease 0.3s;
}
So now the circle can animate width changes. We could define a "pill" width again with a class:
.pill {
width: 300px;
}
And if you want to use jQuery to trigger the width change on a click, we can do the following: toggle the pill class on the circle div
$(".circle").on("click", function() {
$(".circle").toggleClass("pill");
});
Of course to accomodate more buttons inside the "circle" div, you would use another selector for the click action, but you get the point :)
:edit:
Here's a fiddle for that: https://jsfiddle.net/6g0z3390/
:edit2:
I just realized you didn't want the change on click but on hover. In that case you could simply drop the JS and change the css from .pill to .circle:hover :)

Overlay/fade in a div/text when hovering over an image

I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.
I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.
I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.
I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.
My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.
document.getElementById("imageBox").onmouseover = function() {
imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
document.getElementById("imageBox").parentNode.removeChild(image);
document.getElementById("imageBox").add(textHere);
};
The above doesn't work, and my other ideas would be based off of the initial one, for example:
-instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect
-or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?
Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!
Here's an example with CSS using :hover to transition the opacity of your text element.
.wrap {
display: inline-block;
position: relative;
padding: 1em;
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
background: rgba(0,0,0,0.8);
color: #fff;
transition: opacity .5s;
opacity: 0;
position: absolute;
top: 1em; bottom: 1em; left: 1em; right: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.wrap:hover .text {
opacity: 1;
}
img {
max-width: 100%;
display: block;
}
<div class="wrap">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="text">text overlay</div>
</div>

How give more style on a CSS /Jquery Menu Bar

Long time!! :)
I would appreciate if someone can help me with this, it's a jquery menu that I've been using for my website, I would like to know if it's possible to:
Menu Bar at Jsfiddle
Put some vertical line separator on each option of the menu to separate them
without being affected by the hover effect like the text option.
add to the menu on the corner end on the right a small ''social media'' icons (img)
each one directing to a specific link
just like the text menu. The menu fits the website content (940px width)
and has extra space but in the fiddle example it doesn't show.
also important> is there a way to add a bigger text on the menu
and make each menu word option bigger by stretching it? Looks pretty small.Horizontally I mean, vertically it stays the same.
It's important that the underline hover and the rest appears the same just like it's shown in jsfiddle without being affected by these possible changes.
I would deeply appreciate it!!! :)
There are a few CSS and markup changes you can make to achieve what you'd like
#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }
On the first line, you can add your font-family to change the font used in your menu.
On the second line, I added a border-right, and set letter-spacing:2px.
I added the third line to give a border-left to only the first item (so that you get the full appearance of separators).
Also I added this item to your list that you could easily insert a social media icon into:
<li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>
You can push it to the right side of the menu using float:right.
Here is an updated fiddle.

Pure CSS equal height columns with border-bottom on hover?

I was hoping you could help me find a solution to a problem I'm having after trying out Matthew James Taylor's equal height columns using pure css.
I'm trying to add a border-bottom to a column when hovered over by the user (see image: 1). The problem I'm having is that as these DIV's are nested the borders seem to stack on top of eachother (see image: 3). I'm trying to have all the borders on an even level as the effect I'm going for would have them overlap with the gray line
Furthermore, the grey horizontal line in the image would stretch to 100% width of the page and would be on an even level with the black border-bottom. When not hovering over any of the titles (hi there!, contact, twitter) I'd like the columns with content to slide up until only the titles are visible, this would be the only thing I'd like to use Javascript. Perhaps all of this isn't possible using just CSS, or maybe there's a better way of doing it?
**
It looks like this would be solved far more easily with display: table than the CSS trickery you are currently using.
http://jsfiddle.net/rrPKA/
#container { display: table; }
.row { display: table-row; }
.row > div {
display: table-cell;
width: 100px;
border-bottom: 1px solid lightgray;
padding-left: 10px;
}
.row > div:hover { border-bottom: 1px solid gray; }

issue with js dropdown sub menu items positioning

I'm a web designer and new in stackoverflow, I have this issue with positioning drop-down menu links (more specifically aligning them to the left of the menu) because there is a space between the menu left border and the beginning of the links (check the live demo link below). I've tried text-align, float, margin, padding, and position properties but none of them seem to solve this. I think that the menu css might be conflicting with other css code of the page, but I just can't seem to find it.
You can check the source code from a live demo of the page here.
Ok, based on how your code is structured, this is how I would modify your css to do what I think it is you're trying to do - I'll ** the css changes I've made:
.dropdown dd {
position: absolute;
overflow: hidden;
width: 200px;
display: none;
background: #f8f8f8;
z-index: 200;
opacity: 0;
**border-right: 1px solid #004e8e;**
}
.dropdown ul {
**overflow: hidden;**
width: 204px;
border: 1px solid #004e8e;
list-style: none;
}
.dropdown li {
**display: block;**
**position: relative;**
**left: -40px;**
}
This should get rid of the extra space on the left as well as put that blue border around the drop-down that I believe you were also trying to create.

Categories

Resources