So while I hover over each navbar tab, I would like a bar to slide in from the right with a description of the hovered tab. For example, if I hover over "Research," a bar would slide in from the right saying "Read about my current research." How would I do this? Can I use strictly CSS3? Or would I need Javascript? My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matthew H. Goodman</title>
<link href="stylesheettabs.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="nav">
<li>HOME</li>
<li>CV</li>
<li>RESEARCH</li>
<li>CONTACT</li>
</ul>
</body>
</html>
CSS:
#nav {
padding:0px;
margin-top: 200px;
border-radius: 10px;
left: 0;
width: auto;
position: absolute;
height: auto;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg");
overflow: hidden;
}
#nav li {
position: relative;
list-style: none;
width: auto;
border-top: 1px solid black;
}
#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
padding: 15px;
}
#nav li:hover {
background-color: black;
}
#nav li a:hover {
color: #778899;
display: block;
padding: 15px;
}
JSBIn
I post a demo on jsbin.Here is key code:
#nav li span{
transition: all 0.5s;
position: absolute;
top: 0;
left: -300px;
display: block;
width: 300px;
height: 100%;
background: #69f;
z-index: -1;
}
#nav li:hover span{
left: 100px;
}
Related
How do I make li elements not move around when applying transitions using :hover? The circles are made applying height and border-radius to the li elements. I've tried making the ul container bigger, but that didn't seem to work. Thanks for your help.
Code:
body {}
main {
display: flex;
background: #eeeeee;
min-height: 100vh;
padding: 1em;
}
h1 {
font-family: arial;
font-size: 1.4em;
padding-left: 1em;
}
ul {
padding-top:50px;
min-height: 600px;
position:relative;
}
li {
position:relative;
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: width 0.5s, height 0.5s, background-color 1s, line-height 0.5s;
}
li:hover {
display: inline-block;
position:relative;
width: 90px;
height: 90px;
z-index: 10;
background-color: green;
line-height: 90px;
}
<body>
<main>
<h1>
My animated Menu
</h1>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
</main>
</body>
Use CSS3 transforms, this way the element can freely move or scale into the DOM without affecting the layout size.
A nice bonus: the animation will be more efficient in terms of fps as the layout won't be re-computed on each frame (an the GPU will be used)
ul {
padding-top: 50px;
}
li {
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: transform 0.5s, background-color 1s;
}
li:hover {
display: inline-block;
position: relative;
transform: scale(1.5);
z-index: 10;
background-color: green;
}
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
I've got an interesting one: I was testing methods to get the list-item elements of a nav bar to spread evenly across the length of a nav. I used the display:table and display: table cell method to get the most even spread and that seemed to work fine.
When I went to add an ::after element so I could add a top-bar and have a smoother on-hover effect, I found that the bar extended past where I wanted it to -- I was trying to have it just to the end of the words "Communication Design". So I thought I'd just resize the nav container holding my list-elements but because it's a table/table-cell, when the nav resizes, the list-items shink along with it and I can never shore up the last element in the list.
Is there a way to either affect the size of the last table cell or only show a percentage of the ::after element?
Code:
HTML:
<h3>Test & Co.</h3>
<p id="title2">Communications Design</p>
<div id="navContainer">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
CSS:
*
{
padding: 0;
margin: 0;
}
h3
{
padding-left: 140px;
display: inline-block;
padding-top: 10px;
padding-bottom: 25px;
}
#title2
{
display: inline-block;
float: right;
font-size: 16px;
margin-right: 252.5px;
padding-top: 14px;
padding-bottom: 25px;
}
#navContainer
{
//border: 1px solid black;
width: 643px;
margin-left: 140px;
height: 30px;
background: white;
}
#navContainer ul
{
list-style:none;
display: table;
width: 100%;
}
#navContainer ul li
{
display: table-cell;
height: 30px;
line-height: 30px;
font-family:arial;
font-size: 12px;
text-align: left;
//border: 1px solid black;
transition: color .2s ease-in-out;
position: relative;
}
#navContainer ul li::after
{
content: "";
display: block;
float: right;
position: absolute;
margin: auto;
height: 1px;
top: 0;
width: 100%;
background: #ccc;
transition: background-color .2s ease;
}
#navContainer ul li:hover::after
{
background: #8c8c8c;
}
#navContainer ul li:hover
{
color: #A6CFEB;
}
I have a ul inside a div. I want to center it. Here is the fiddle
HTML
<div id="menu-top">
<div id="menu-container">
<div id="menu-mask">
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
CSS
body {
background-color: #000;
overflow: hidden;
}
#menu-top {
position: absolute;
display: block;
width: 100%;
height: 26px;
top: 0px;
z-index: 9;
}
#menu-container {
width: 840px;
margin: auto;
}
#menu-mask {
display: inline-block;
height: 26px;
margin: auto;
overflow: hidden;
position: relative;
top: 0;
width: 800px;
}
#menu {
position: absolute;
display: block;
left: 0px;
top: 0px;
height: 26px;
margin: auto;
padding: 0px;
width: 100%;
}
#menu li {
padding-right: 20px;
clear: none;
float: left;
display: inline;
}
#menu li a {
font-size: 12px;
line-height: 26px;
letter-spacing: 1.5px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
Here you go... change your #menu to this:
#menu {
position: absolute;
display: block;
margin-left:25%;
margin-right:25%;
margin-top:auto;
margin-bottom:auto;
top: 0px;
height: 26px;
padding: 0px;
width: 100%;
}
The margin-left and margin-right settings will center your menu on the page. I gave this a quick test in your JSFiddle to make sure it works.
Oh, and here's the updated JSFiddle showing the changes...
http://jsfiddle.net/LyJz9/7/
You can probably use text-align:center for what you are trying to do.
I manage the website for a small college library and am trying to create a bubble tooltip for an images that are part of a slider. Here's the link to the page to show you what I mean:
http://library.sfc.edu/webvoy3.htm. If you hover over the first image in the slider, you will see the tooltip stuck in there. There's no JavaScript for this tooltip, only CSS. I got the code from http://trentrichardson.com/examples/csstooltips/.
This is the CSS part of the tooltip:
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(images/bubble.gif) no-repeat top;
margin-top: 20px;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(images/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(images/bubble.gif) no-repeat bottom;
}
This is the CSS of the SLIDER
#slider {
width: 450px;
position: relative;
height:inherit;
float:left;
padding-right:45px;
margin-left: 8px;
}
#slider .buttons span {
display: block;
width: 38px;
height: 38px;
font-size: 0;
line-height: 0;
text-indent: -4000px;
cursor: pointer;
}
#slider .buttons span {
position: absolute;
top: 32px;
}
#slider .buttons .prev {
left: -5px;
background: url(images/button-prev.gif) no-repeat 0 0;
}
#slider .buttons .next {
right: 16px;
background: url(images/button-next.gif) no-repeat 0 0;
}
#slider .holder {
width: 400px;
height: 110px;
position: relative;
overflow: hidden;
left:40px;
margin-right: 5px;
padding-right: 0px;
padding-top: 9px;
background: url(images/back-slider.jpg) no-repeat 0 0;
}
#slider .content ul {
position:relative;
list-style-type:;
height:112px;
width: 450px;
overflow:hidden;
padding-right: 10px;
padding-top: 5px;
}
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height:133px;
overflow:hidden;
width:80px;
}
#slider .content ul li a {
display:block;
width: 74px;
height: 97px;
padding-left: 3px;
padding-top: 4px;
background: url(images/slider-fragment.gif);
}
AND THIS IS THE HTML CODE
<div id="slider">
<div class="buttons">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="holder">
<div class="content">
<ul>
<li>
<a href="http://library.sfc.edu:7008/vwebv/holdingsInfo?bibId=261454" class="tt">
<img src="css/css-eb/images/covers/cover1.png" />
<span class="tooltip">
<span class="top"></span>
<span class="middle">This is my Bubble Tooltip with CSS</span>
<span class="bottom"></span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
The problem seems to be the incompatibility the tooltip's CSS with the slider's CSS.
Any suggestion or advice would be greatly appreciated.
Just remove overflow: hidden from #slider .content ul li - works for me when I do this live via Developer Tools.
Please Remove the overflow:hidden for the class #slider .content ul li
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height: 133px;
width: 80px;
}
I have a problem with hover on this site I'm doing. The menu is ok in all pages, except the home. What is kinda awkward, 'cause I'm just using php include to change the content, and the header, menu and footer are always the same.
In Firefox and Chrome it's ok, but the problem is that when I mouseover the menu on IE9 it has a displacement, like the image:
example
http://i74.photobucket.com/albums/i265/_k_ps_/exemplo.gif
I think it's something with the display: block, but I don't know how to fix it and make the menu work properly :(
Here is the HTML:
<div id="menu" class="group">
<ul>
<li id="menu-01"><span>Home</span></li>
<li id="menu-02"><span>A Empresa</span></li>
<li id="menu-03"><a href="galeria_representacao.php?image=0">
<img src="images/representacao.jpg" class="menu-head" onMouseOver="this.src='images/representacao-hover.jpg'" onMouseOut="this.src='images/representacao.jpg'"></a>
<ul class="menu-body">
<li>Teste1</li>
<li>Teste2</li>
<li>Teste3</li>
<li>Teste4</li>
<li>Teste5</li>
</ul>
</li>
<li id="menu-04"> <span>Serviços</span></li>
<li id="menu-05"><span>Projetos</span></li>
<li id="menu-06"><span>Novidades</span></li>
<li id="menu-07"><span>Contato</span></li>
<li id="menu-08"><span>E-mail</span></li>
<li id="menu-09"><span>Login</span></li>
</ul>
</div>
And the CSS:
#menu {
width: 834px;
height: 44px;
background-image: url(../images/menu-up.jpg);
display: block;
}
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
#menu ul span {
display: none;
}
#menu ul li {
list-style: none;
display: block;
float: left;
position: relative;
}
#menu li ul {
position: absolute;
display: none;
z-index: 12;
}
#menu li ul li {
clear: both;
position: relative;
margin: 0;
padding: 0;
background-color: #0676c4;
width: 157px;
height: 40px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 14px;
}
#menu li ul li a {
clear: both;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 10px;
margin: 0;
display: block;
}
#menu li ul li a:hover {
background-color: #87c5f1;
height: 20px;
margin: 0;
}
#menu ul li, #menu ul a {
margin: 0;
padding: 0;
text-decoration: none;
height: 44px;
display: block;
}
#menu-01 {
left: 0px;
width: 75px;
}
#menu-01 a:hover {
background-image: url(../images/menu-down.png);
}
#menu-02 {
left: 0px;
width: 112px;
}
#menu-02 a:hover {
background: url(../images/menu-down.png) -75px;
}
#menu-03 {
background-image: url(../images/representacao.jpg);
left: 0px;
width: 157px;
z-index: 11;
border: 0;
}
#menu-04 {
left: 0px;
width: 103px;
}
#menu-04 a:hover {
background: url(../images/menu-down.png) -344px;
}
#menu-05 {
left: 0px;
width: 108px;
}
#menu-05 a:hover {
background: url(../images/menu-down.png) -447px;
}
#menu-06 {
left: 0px;
width: 113px;
}
#menu-06 a:hover {
background: url(../images/menu-down.png) -555px;
}
#menu-07 {
left: 0px;
width: 101px;
}
#menu-07 a:hover {
background: url(../images/menu-down.png) -668px;
}
.menu-head {
border-width: 0;
}
Can somebody help me?
I put your code (and modified it a bit) in a jsfiddle.
The problem, from what I see, seems to be with the 3rd element, which has a child ul.
From what I see from there, you have a problem with your CSS :
This CSS style
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
Affect this HTML element :
<ul class="menu-body">
Which you probably don't want to. (fixed here)
But I'm not sure it's your error, the code you supplied needs the images, and I do not have them...
Also, all your left:0px are useless.
If you want a better answer, you'll have to enhance your question (and/or the jsfiddle!). :-)