I am trying to figure out a way to make the black blob go back smoothly as you're dragging the cursor off it. Better yet I was wondering if its possible to make the blob disappear from left to right using css. Also, do you have an idea on how to make the text turn white as the blob goes over them? Thank you so much for help!
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
width: 0%;
height: 1.3em;
background-color: black;
visibility: hidden;
transition: width .2s;
}
li a:hover::before {
width: 100%;
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>
No need to use visibility since you already set 0% to width. You can also adjust the position to have a left to right transtion. For the color, simply add another hover declarion on the a:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
width: 0%;
left: auto;
right: 0;
height: 1.3em;
background-color: black;
transition: width .2s, left .2s .2s, right .2s .2s;
}
li a:hover::before {
width: 100%;
left: 0;
right: auto;
}
li a:hover {
color: #fff;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
You can also simplify your code using gradient:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
transition:
color 0.2s,
background-size 0.2s,
background-position 0.2s 0.2s;
}
li a:hover {
color: #fff;
background-size: 100% 100%;
background-position: right;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
i have updated your css code. hope this helps you:
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
li a:hover::before {
width: 100%;
visibility: visible;
}
li a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>
Related
Hey i new to this web code thing, and i need help from all of you.
I have side menu that i need to convert it to hamburger menu when the screen is small mobile sized.
I need all of this content <div id="mySidebar" class="sidebar"> to be hamburger menu on mobile scale ratio
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>
You can do something like this, I guess you can do further editing to match style that you use but most of the css you can re-use. If you check snippet from below in full screen and try to resize your browser you will see how your menu switch to hamburger menu when window size becomes less than 1000px
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
display: flex;
align-items: center;
}
nav {
display: none;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
#media screen and (max-width: 1000px) {
.sidebar {
display: none;
}
nav {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<a href="#">
<li><i class="material-icons">home</i>Dashboard</li>
</a>
<a href="#">
<li><i class="material-icons">info</i>Monitoring</li>
</a>
<a href="#">
<li><i class="material-icons">settings</i>Settings</li>
</a>
<a href="#">
<li><i class="material-icons">logout</i>Logout</li>
</a>
</ul>
</div>
</nav>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>
</html>
My problem is that when I specify the height of the div class "mobile" to 100wh, it only takes on about half of the screen. Another thing is, that I cannot make the list inside the mobile div to appear. My goal is to align them horizontally and vertically using flexbox, and make them appear as I press the hamburger button but so far I cannot see the list elements at all. Thanks for help!
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mobile {
position: fixed;
visibility: hidden;
background: rgba(255, 0, 0, 0);
width: 100vw;
height: 500px;
z-index: 1;
transition: visibility 1s, background 1s;
}
.hamburger {
align-items: center;
display: flex;
width: 25px;
height: 15px;
margin-right: 50px;
cursor: pointer;
display: none;
z-index: 2;
}
.hamburger.active .line {
background: rgba(0, 0, 0, 0);
transition: .2s;
}
.hamburger.active .line::before {
transform: rotate(45deg);
top: 0;
transition: .5s;
}
.hamburger.active .line::after {
transform: rotate(135deg);
top: 0;
transition: .5s;
}
.line {
position: relative;
background-color: black;
width: 100%;
height: 1px;
transition: .5s;
}
.line::before,
.line::after {
position: absolute;
content: "";
height: 1px;
width: 100%;
background-color: black;
}
.line::after {
top: 6px;
transition: .5s;
}
.line::before {
top: -6px;
transition: .5s;
}
.nav {
justify-content: flex-end;
display: flex;
flex-wrap: wrap;
letter-spacing: 1px;
padding: 30px 0;
margin-right: 50px;
}
.nav li {
text-align: center;
font-family: "Georgia";
padding-left: 60px;
font-size: .8em;
font-weight: normal;
letter-spacing: 1px;
list-style: none;
}
.nav li a {
position: relative;
text-decoration: none;
color: inherit;
transition: color .5s;
}
.nav li a::before {
top: 2em;
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: black;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav li a:hover::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav, nav {
align-items: center;
display: flex;
}
nav .logo {
margin-left: 50px;
display: flex;
justify-content: flex-start;
flex: 1;
font-family: Georgia, serif;
font-size: .8em;
padding: 30px 0;
font-weight: bold;
letter-spacing: 3px;
}
.sublogo {
font-weight: lighter;
margin-left: 10px;
}
.sublogo::before {
content: '|';
margin-right: 10px;
}
#media (max-width: 1120px) {
.nav {
display: none;
}
.hamburger {
display: flex;
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
nav .logo {
font-size: 1em;
letter-spacing: 3px;
transition: visibility .5s, opacity .5s;
}
nav .logo .sublogo {
letter-spacing: 3px;
}
.logo.active {
visibility: hidden;
opacity: 0;
transition: visibility .5s, opacity .5s;
}
.mobile.active {
display: flex;
visibility: visible;
background: rgba(255, 25, 55, 1);
transition: background 1s;
}
}
#media (max-width: 600px) {
nav .logo {
font-size: 1em;
letter-spacing: 3px;
}
.sublogo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hamburger').click(function(){
$('.hamburger').toggleClass('active');
$('.logo').toggleClass('active');
$('.mobile').toggleClass('active');
})
})
</script>
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
navigation.
<div class="sublogo">
this is my first example
</div>
</div>
<ul class="nav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
<div class="hamburger">
<div class="line">
</div>
</div>
<div class="mobile">
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
</div>
</nav>
</body>
</html>
you made the width:100vw, you seem to left the height:500px;
Anyhow, check on the .mobile div that the position is fixed, but you did not specified any constraints like top:0; left:0; etc; this is why that div is too hight on the page.
The viewport is alright. :D Have a nice day!
I made a mobile responsive hamburger menu to horizontal nav bar, but I'm having trouble making a hover style for the links on the horizontal nav bar that don't make them jump. If you look at my Codpen you'll see the general style I want on those links on hover, but I want that highlight to be larger around the wording. When I've tried to do this the links end up jumping on hover. The other thing is that I can't get the top highlight much bigger... it's like it's cut off with some other property. This is the first menu like this I've made (I'm fairly new) so I played around with a lot of different CSS properties and values to get things to look perfect upon first glance and I'm sure some CSS isn't right, I just don't know what or where. I pasted the code below with everything inline but definitely check out the codpen because that's more accurate to how it looks on my computer. Thanks for your help!
http://codepen.io/sshine2/pen/VbjGaE
EDIT: I edited the code in Codepen to show how the top of the highlight gets cut off and the link jumps when the highlight is the size I want it to be.
SECOND EDIT: Fixed the top being cut off myself. Changed where the entire menu was displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block!important;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: .4em;
padding-right: 0em;
padding-left: 0em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>
The jumping issue is because you add padding on hover which isn't there before.
Before your media queries define the padding ones:
.menu li {
border-bottom: 0;
border-top: 0;
padding: 1em;
}
Then remove the defined paddings for .menu li in your min 768px query.,
code pen
This is my css code for my icons, the css code also changed my background and other stuff in my webpage how come. A lot of this CSS code is effecting my HTML code sort of making it not established i added colors but they won't run over the CSS code.
html {
font-size: 20px;
}
body {
background-color: #dde7f2;
padding: 50px;
text-align: center;
}
/* Wrapper */
.icon-button {
background-color: white;
border-radius: 3.6rem;
cursor: pointer;
display: inline-block;
font-size: 2.0rem;
height: 3.6rem;
line-height: 3.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 3.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 3.6rem;
height: 3.6rem;
border-radius: 3.6rem;
margin: -1.8rem;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
/* Icons */
.icon-button i {
background: none;
color: White;
height: 3.6rem;
left: 0;
line-height: 3.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 3.6rem;
z-index: 10;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
color: White;
}
This is my html code, creating links, is there something i should add or delete. The
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #dde7f2;
}
li a {
display: block;
color: #dde7f2;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color:#dde7f2;
color:Blue;
}
</style>
</head>
<body>
<ul>
<li class="external-link">
Soundcloud
</li>
<li class="external-link">
Shop
</li>
<li class="external-link">
Photos
</li>
<li class="external-link">
About Me
</li>
</ul>
</body>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: White;
}
li {
float: center;
}
li a {
display: block;
color: Blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color:Powderblue;
}
.active {
background-color: #dde7f2;
}
</style>
</head>
<body>
**<i class="icon-twitter"></i><span></span>
<i class="icon-facebook"></i><span></span>
<i class="icon-google-plus"></i><span></span>**
</body>
</html>
I just finished my site. Atleast mostly, because there is a block of white space that is puzzling me. It appears every time, but when i select it, it disappears. Here is what it looks like.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.Jack Murdock,</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="portfolio.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body bgcolor="#3b3a3b">
<div id="HeaderContainer">
</div>
<h1>.01 Photography</h1>
<ul class="flatflipbuttons">
<li><span><img src="images/photography.png" /></span><b>photography</b></li>
<li><span><img src="images/graphicdesign.png" /></span><b>2D Design</b></li>
<li><span><img src="images/3dwork.png" /></span><b>3D Work</b></li>
<li><span><img src="images/contact.png" /></span><b>Contact</b></li>
</ul>
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o" title="1277971_10202333285879975_353051239_o" id="wows1_0"/></li>
<li><img src="data1/images/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o" title="14262710457_9135dff762_o" id="wows1_1"/></li>
<li><img src="data1/images/dsc_1180.jpg" alt="DSC_1180" title="DSC_1180" id="wows1_2"/></li>
<li><img src="data1/images/dsc_2612.jpg" alt="DSC_2612" title="DSC_2612" id="wows1_3"/></li>
<li><img src="data1/images/dsc_8128.jpg" alt="DSC_8128" title="DSC_8128" id="wows1_4"/></li>
<li><img src="data1/images/image_2.jpg" alt="image_2" title="image_2" id="wows1_5"/></li>
<li><img src="data1/images/image_10.jpg" alt="image_10" title="image_10" id="wows1_6"/></li>
<li><img src="data1/images/image_12.jpg" alt="image_12" title="image_12" id="wows1_7"/></li>
<li><img src="data1/images/image_15.jpg" alt="image_15" title="image_15" id="wows1_8"/></li>
<li><img src="data1/images/image_17.jpg" alt="image_17" title="image_17" id="wows1_9"/></li>
</ul></div>
<div class="ws_bullets"><div>
<img src="data1/tooltips/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o"/>1
<img src="data1/tooltips/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o"/>2
<img src="data1/tooltips/dsc_1180.jpg" alt="DSC_1180"/>3
<img src="data1/tooltips/dsc_2612.jpg" alt="DSC_2612"/>4
<img src="data1/tooltips/dsc_8128.jpg" alt="DSC_8128"/>5
<img src="data1/tooltips/image_2.jpg" alt="image_2"/>6
<img src="data1/tooltips/image_10.jpg" alt="image_10"/>7
<img src="data1/tooltips/image_12.jpg" alt="image_12"/>8
<img src="data1/tooltips/image_15.jpg" alt="image_15"/>9
<img src="data1/tooltips/image_17.jpg" alt="image_17"/>10
</div></div><span class="wsl">slider plugin wordpress by WOWSlider.com v5.6</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1//wowslider.js"></script>
<script type="text/javascript" src="engine1//script.js"></script>
<!-- End WOWSlider.com BODY section -->
<ul id= "nav2">
<li>Photography</li>
<li>Photo retouching</li>
<li>Studio Work</li>
</ul>
<p> </p>
<p> </p>
</body>
</html>
CSS
#charset "utf-8";
#charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
}
#HeaderContainer {
width: 102%;
height: 320px;
background-color: #FFFFFF;
background-image: url("title2.png");
background-repeat: no-repeat;
margin-left: 0 auto;
margin-right: 0 auto;
float: center;
position: relative;
top: -50px;
}
.title {
position: relative;
text-align:center;
color: #5f5f5f;
}
#nav {
display: inline;
}
ul {
list-style: none;
display: block;
}
.CenterContainer {
width: 102%;
overflow: visible;
display: block;
height: 210px;
padding-top: 10px;
}
div.img{
height: 133px;
width: 200px;
float: left;
text-align: center;
margin: 20px 30px 20px;
display: block;
line-height:0;
}
#nav li a:hover {
color: #9BACC4;}
/* CSS Document */
a.current:link, a.current:visited {
border-bottom:thick dotted #FFFFFF;
}
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.TitleImg {
position: relative;
top: 100px;
}
#nav2 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: relative;
top: -500px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
font-family: 'Hammersmith One', sans-serif;
}
#nav2 li:hover{
transform: scale(0.862, 1.134);
-webkit-transform: scale(0.862, 1.134);
-moz-transform: scale(0.862, 1.134);
-o-transform: scale(0.862, 1.134);
-ms-transform: scale(0.862, 1.134);
}
#nav2 li {
float: left;
padding-left: 10px;
}
#nav2 li a {
display: inline;
color: #66a9df;
}
.frontimage {
position: absolute;
left: 500px;
display: inline;
}
#nav {
width: 25px;
height: 600px;
}
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-bottom: 0; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li:nth-of-type(1) a{
color: green;
background: #3B9DD5;
}
ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}
ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}
ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}
ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li b{ /* CSS for text alongside button */
display: block;
position: relative;
top: -100%; /* starting vertical position of text */
left: 100%; /* horizontal position of text */
text-align: left;
text-indent: 10px;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.5s;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover b{
opacity: 1;
top: -65%; /* vertical position of text onmouseover */
}
/* CSS for 2nd menu below specifically */
ul.second li a{
background: #eee !important;
}
ul.second li a:hover{
background: #ddd !important;
}
h1 {
position: relative;
top: -100px;
font-family: 'Special Elite', cursive;
display: inline;
}
#nav3 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
color: #5674DC;
}
#nav3 li {
float: left;
margin: 2px;
}
#nav3 li a {
display: inline;
}
#nav4 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
word-spacing:30px;
margin: 0 0 10px 0;
}
#nav2 li {
float: left;
margin: 2px;
}
#nav2 li a {
display: inline;
}
a:link {
text-decoration: none;
color: #0e5b9a;
}
.contact {
margin: 0 auto;
position: relative;
top: -400px;
display: block;
width: 40%;
font-family: 'PT Sans Narrow', sans-serif;
}
Any advice on fixing this would be greatly appreciated!
Change
font-family: 'Special Elite', cursive;
To:
font-family: 'Special Elite', sans-serif;
Cursive seems to have lots of issues.