I've problem with creating a skewed navigation, actually everything is good except the strange gap between navigation item links. I did bit of research and I saw that is because of Anti Aliasing technique.
I tried to hack it with ::before selector and/or with applying border-right attribute to the block, but no success.
There is code:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
background: #1d1e22;
overflow: hidden;
}
ul {
margin-left: 5%;
position: relative;
}
ul li {
float: left;
list-style: none;
}
ul li a {
display: block;
padding: 20px;
text-decoration: none;
color: #fff;
background: #444857;
transform: skew(-20deg);
transition: all 300ms ease-in-out;
}
ul li a:hover {
background: #fff;
color: #000;
}
ul li a span {
transform: skew(20deg);
display: block;
}
<header>
<ul>
<li><span>Home</span></li>
<li><span>About us</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</header>
I want it to be without the black gap, just in one tone. If you know how to fix it, I will appreciate if you share it.
The issue here is how browsers handle subpixel rendering. As you are transforming the shape, the browser applies some antialiasing on the edges of the shapes for a smoother rendering.
Because of this there is no guarantee that the edge of two elements will align perfectly. See an interesting article about it.
The quickest fix is to apply some negative margin so that the shapes overlap.
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
background: #1d1e22;
overflow: hidden;
}
ul {
margin-left: 5%;
position: relative;
}
ul li {
float: left;
list-style: none;
margin-left: -2px;
}
ul li a {
display: block;
padding: 20px;
text-decoration: none;
color: #fff;
background: #444857;
transform: skew(-20deg);
transition: all 300ms ease-in-out;
}
ul li a:hover {
background: #fff;
color: #000;
}
ul li a span {
transform: skew(20deg);
display: block;
}
<header>
<ul>
<li><span>Home</span></li>
<li><span>About us</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</header>
I added a box-shadow: 1px 0 1px #444857 to the <a> tags; https://codepen.io/nosnetrom/pen/QPaMBQ
Related
I was trying to learn how to create drop down menu from CSS tricks. This is code they have:
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>
css
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
What I don't understand from above is why they need the following selector:
ul li ul:hover
Because when I remove it the menu still works. Can someone explain why? Which is the correct selector?
Here is demo:
https://stackblitz.com/edit/js-aftbkv?file=style.css
Article link:
https://css-tricks.com/solved-with-css-dropdown-menus/
the hover selector means: when the mouse is on that element, something is going to happen. it adds some functionality.
has u see the elements of the dropdown menu they have display:none and on hover they set their display to display:block appering them.
If u delete all the hover it will not work! maybe is because u deleted them and not save the file or maybe the cache, but without :hover will not be functionality.
I have a menu and submenu from one of the elements. The code is here: http://jsfiddle.net/mq5g6upe/ . I would like you to tell me how to implement vertical dropdown menu from element My project because now it not seem ok.
header.html
<header>
<div class="main">
<ul>
<li>Home</li>
<li>My projects
<ul class="my-projects-dropdown">
<li>Endless Blow
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>My Google Play link</li>
<li>About</li>
<li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
</ul>
</div>
</header>
header.css
#container {
margin: 0 auto;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a:hover {
background-color: cyan;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
vertical-align: middle;
line-height: normal;
}
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
}
ul li:nth-child(5){
margin-left: 20px;
vertical-align: middle;
line-height: normal;
}
ul ul {
display: none;
position: absolute;
}
ul ul li {
float:none;
display:list-item;
position: relative;
}
Now there are three problems. First the submenu of items seems to overlap on another elements. Second there is a distance between the menu element My projects and first element of submen. Third outside jsfiddle in production (https://jakuwegiel.web.app/home) also submenu is moved a bit to right.
I forked your fiddle. check this https://jsfiddle.net/wrtxkz0d .
Made these changes in your css. Dropdown is working.
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
margin:0;
padding: 0;
}
ul ul li {
float:none;
display:list-item;
position: relative;
margin: 13px 0;
}
When you hover over, say, 'News', a blue underline will pop-in. From what I've seen, it is actually a background with a height transition from 0px -> 5px. However, my code is unable to replicate it.
* {
padding: 0;
margin: 0;
}
.navbar {
padding: 28px 36px;
background: black;
}
.navbar ul {
list-style: none;
}
.navbar li {
padding: 0 8px;
height: 100%;
position: relative;
transform: translateZ(0);
}
.navbar li::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
background: blue;
transition: height .2s ease-in-out;
}
a {
display: block;
text-decoration: none;
color: white;
}
<div class="navbar">
<ul>
<li>Home
</ul>
</div>
I'm definitely missing something obvious here, but I don't get it. Help?
If I got you right, you did the most of the work, but you should always keep in mind when you using pseudo-elements like ::before you have to declare content property in it, otherwise it won't work at all. Then to make this work, you should just care about making the transition by putting initial with and height on ::before then make the height element to the actual one in hover.
So your final code should be something like this:
* {
padding: 0;
margin: 0;
}
.navbar {
padding: 28px 36px;
background: black;
}
.navbar ul {
list-style: none;
}
.navbar li {
padding: 0 8px;
height: 100%;
position: relative;
transform: translateZ(0);
}
.navbar li::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 50px;
height: 0;
background: blue;
transition: height .2s ease-in-out;
}
.navbar li:hover::before {
height: 5px;
}
a {
display: block;
text-decoration: none;
color: white;
}
<div class="navbar">
<ul>
<li>Home
</ul>
</div>
I'm trying to create a responsive, drop-down CSS menu, and I have a media query that targets mobile devices (760 pixels). I'm trying to make all the links occupy the entire width, and that goes well, but the problem is when I display the drop down menu when the width is less than 760 pixels, all of the links of the drop down menu are cramped into the navigation links. I would like to know how to solve this problem, because I have been thinking for a long time and haven't figured out a solution. I want the drop-down menu for services to be directly below services, and the final contact link to go below the drop-down menu. This is the problem:
Below is the HTML and the CSS, as well as a link to the JSFiddle.
HTML:
<div class="wrapper">
<ul class="links">
<li id="active">home
</li><li>about
</li><li>services
<ul class="links">
<li>web development
</li><li>design templates
</li><li>networking
</li><li>custom builds
</li>
</ul>
</li><li>contact</li>
</ul>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
font-family: Source Sans Pro, Helvetica, sans-serif;
}
.wrapper {
width: 100%;
height: auto;
}
ul.links {
margin: 0px;
padding: 0px;
list-style: none;
background-color: #EBEBEB;
}
ul.links a {
color: #737373;
text-decoration: none;
}
ul.links ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
}
ul.links li {
background: none;
color: #737373;
display: inline-block;
position: relative;
font-size: 19px;
padding-top: 22px;
padding-bottom: 22px;
padding-left: 35px;
padding-right: 35px;
transition: background 0.2s linear 0s, color 0.2s linear 0s;
-webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
}
ul.links ul li {
position: relative;
font-size: 18px;
display: block;
float: left;
width: 100%;
}
ul.links li:hover {
background-color: #6ECFFF;
}
ul.links li:hover ul {
display: block;
}
ul.links li:hover .link {
color: #F0F0F0;
}
ul.links ul li:hover .link2 {
color: #F0F0F0;
}
#active {
background-color: #6ECFFF;
}
#active a {
color: #F0F0F0;
}
#media screen and (max-width: 760px) {
ul.links li
{
width: 100%;
}
ul.links ul {
position: absolute;
left: 0;
}
ul.links ul li {
background: #EBEBEB;
}
}
JSFiddle: https://jsfiddle.net/7tkn7zzs/
You should make ul.links ul { to position: relative; in media query to display it proper.
ul.links ul {
position: relative;
left: 0;
}
Working Fiddle
ul.links ul {
position: relative;
left: -35px; /* equal to padding left */
}
I've made a css dropdown menu and I want each dropdown option to have a blue background when it is hovered on. However when I try this the background for the option will only be blue when the top half of it is hovered on. Here it is on jsfiddle. If you hover your mouse on the "products" option and then put the mouse under "plates" but above the gray horizontal line the background won't be blue. Can anybody help me? Thank you.
http://jsfiddle.net/hDWuJ/1/
HTML (Note this is a segment of my web page and so it does not have valid syntax)
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
<ul id="drop-nav">
<li>Home</li>
<li>Products <span id="arrowDown">▼</span>
<ul>
<li>Children's Stuff</li>
<li>Plates</li>
<li>Top Sellers</li>
</ul>
</li>
<li>Services <span id="arrowDown">▼</span>
<ul>
<li>Wash 'n' Fold</li>
<li>Blanket Making</li>
<li>Wedding Dress</li>
<li>Custom</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS
body
{
background-color: #dfdfdf;
}
#title
{
text-align: center;
color: #07a8ca;
font-size:60pt;
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 0px #888888;
}
h1
{
margin: 0px;
padding: 0px;
}
hr
{
height: 3px;
color: #07a8ca;
background: #07a8ca;
font-size: 0;
border: 0;
}
#HorzLineDiv
{
width: 95%;
margin: 2% 0% 3% 0%;
margin-left: auto ;
margin-right: auto ;
}
#Menu
{
width:100%;
}
#drop-nav
{
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
display: inline;
padding: 12px 50px 8px 50px;
margin: 0px 5px 0px 5px;
border-left: 3px solid #07a8ca;
}
ul li:first-child
{
border-left: 0px;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-transform: uppercase;
text-decoration: none;
text-align:center;
color: #000;
font: 25px/1.1em "Kelly Slab","serif";
transition: color 0.4s ease 0s;
-moz-transition: color 0.4s ease 0s; /* Firefox 4 */
-webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
-o-transition: color 0.4s ease 0s; /* Opera */
}
ul li a:hover
{
color: #FF4D4D;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
li:hover a
{
margin:0;
}
li:hover li a:hover
{
background: #21e8fa;
}
#drop-nav li ul li
{
border-top: 0px;
border-left: 0px;
}
#drop-nav ul li a
{
border-top: 3px solid #888;
padding: 13px 0px 13px 0px;
margin: -10px -8px;
text-align:center;
text-transform: none;
position:relative;
top: 13px;
color: #000;
}
#drop-nav ul
{
width:100%;
position:absolute;
right:-5px;
}
a
{
margin:0px;
padding:0px;
}
#arrowDown
{
font-size: 10pt;
vertical-align:text-bottom
}
The main issue is in your margins and padding, but this can be worked around by changing your ul li to display: block; instead of display: inline;.
Of course, this isn't a direct fix to the issue, and there still is an area at the bottom that doesn't work on hover, but it is much smaller than before. The proper way to go about fixing this is fixing your margins and padding.
Demo
UPDATE
Reading deeper into your code, I found the actual problem. It is not in margins or padding as I originally thought, but is a top property of 13px defined in #drop-nav ul li a. That top of 13px was creating a blank, inactive space in your list.
Get rid of that piece and it is working fine: DEMO