`
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
overflow: hidden;
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
`I am trying to create a dropdown menu for my website,changing z-index is not bringing the dropdown infront of other elements.
The image looks like this
If you want me to include the CSS, ill include.. If there is any quick fix let me know. Z-index and changing position: absolute doesn't work either.
The issue is the overflow:hidden you have in place meaning that dropdown was there but the overflow was hiding it.
I'm assuming the overflow was there as a clearfix? If so, alternative solutions exist.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
/* overflow: hidden; */ /* remove this */
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
/* float: left; */ /* and probably this */
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
Related
I am making a responsive navigation bar. When i am making it in mobile view with hamburger it is not working. I am using checkbox for this. When someone click the hamburger menu in mobile view the check box will checked and css of the check box with type checked will display it. Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="./javascript.js"></script>
<title>Pricing Page</title>
</head>
<body>
<!-- Navigation -->
<nav>
<input type="checkbox" id="check">
<div class="logo">
<h3>Spenflo</h3>
</div>
<div class="menus">
<ul class='menu'>
<li> Pricing</li>
<li> About </li>
<li> Blog </li>
<li> Contact </li>
<li class="login"> Login </li>
<li class="get-started"> Get Started </li>
</ul>
</div>
<div class="signup">
<button><a class="login-btn" href="/">Login</a></button>
<button><a class="get_started-btn" href="/">Get Started</a></button>
</div>
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "p22MackinacPro";
src: url(./fonts/P22MackinacPro-BoldItalic_11.otf) format("opentype");
font-style: italic;
}
nav {
position: relative;
font-family: 'Satoshi';
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
}
nav .logo {
color: #D53987;
margin-left: 20px;
cursor: pointer;
}
nav .menus {
margin-left: 10%;
}
nav .menus ul {
display: flex;
gap: 10px;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
nav .menus ul li {
font-size: 18px;
line-height: 100%;
cursor: pointer;
}
nav .menus ul .login,
.get-started {
display: none;
}
nav .signup a {
text-decoration: none;
color: #000;
}
nav .signup button {
background-color: #000;
font-size: 18px;
width: 180px;
height: 72px;
border: none;
top: 0px;
cursor: pointer;
}
nav .signup button .login-btn {
cursor: pointer;
margin-right: 30px;
}
nav .signup button .get_started-btn {
color: #fff;
cursor: pointer;
}
nav .signup button:first-child {
background-color: white;
width: auto;
height: auto;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 80px;
margin-right: 10px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media screen and (max-width: 768px) {
.checkbtn {
display: block;
}
nav .menus ul {
position: fixed;
width: 100%;
height: 100vh;
left: 100%;
top: 9%;
background-color: red;
bottom: 15%;
text-align: center;
transition: all .5s;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.5s;
}
nav .menus ul .login,
.get-started {
display: block;
}
nav .menus ul li {
width: 90%;
margin: 10px 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.24);
}
nav .signup {
display: none;
}
nav #check:checked~nav .menus ul {
left: 0%;
}
}
I tried everything to do this using only css but nothing is working at all
Currently coding a responsive navbar however 2 things are really bothering me that I can't get my head round. Any help would be appreciated:
1/ With my original logo pic I have been using, I have got the nav links to line up with it (like a sort of display inblock) but I have noticed only lines up in full screen view, as you minimize the screen the links cluster up underneath and then eventually disappear when the screen is really small and the togglebox appears. How can you fix this problem.
2/ I can’t get the icons to hide from the links in fullscreen view, yet I have done the display:none in the coding
My html code so far:
<!DOCTYPE html>
<html>
<head>
<title>nav bar</title>
<link rel="stylesheet" type="text/css" href="CSS/style.CSS">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jqueryui/1.12.0/jquery- ui.min.js"></script>
<script type="text/javascript">
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
My CSS so far:
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header{
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1{
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left:0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background:#802CED;
color: #000000;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align:right;
color: rgba(185,153,2,1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right:1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background:#000000;
height: 3px;
width:1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background:transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border:none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus{
background:transparent;
}
.site-nav--icon {
display: none;
}
}
Put de icon into a div block and hidden the div object.
<div class="boton-menu"><i class="fa fa-bars"></i></div>
and the css:
.boton-menu{
display: none;
}
.fa:fullscreen {
display: none
}
... should do it.
At this point, unprefixed support sits at 1.99% while the prefixed support should be 81.71%:
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
However, in my Chrome (v70.0.3538.77) it doesn't seem to work.
According to this article Chrome v71 will support it.
Spec here.
Browser compat here.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header {
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1 {
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left: 0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #802CED;
color: #000000;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align: right;
color: rgba(185, 153, 2, 1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right: 1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #000000;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
.site-nav--icon {
display: none;
}
}
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
My website is working great on most browsers but for some reason Chrome is showing my navigation items outside of the header bar. I'm not sure which part of my CSS is at fault here and why it is being interpreted differently between browsers. Help would be appreciated. You need to look at it with screen size of 1100px or higher to see what I mean - lower than that and it turns into responsive navigation button.
Here's a link to show you: http://imgur.com/m5sVBww
body {
margin: 0;
line-height: 1.428;
background-color:#956396;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: #ffffff;
background: #956396;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
border-radius: 10px;
}
.show-menu:hover {
background: #9b729b;
}
#extra {
background: #ffffff;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
#extra2 {
background: #956396;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
position: relative;
top: 5px;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: white;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
position: relative;
top: 20px;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#956396;
margin-top: 28px;
padding-left: 35px;
padding-right: 35px;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
#extra {
clear: both;
}
}
<head>
<meta charset="utf-8">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>Home</li>
<li>Customer Research</li>
<li>Business Improvement</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div>
</body>
</html>
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}
I want to have 3 dots on my page to, for example, toggle the display of a contextual menu. How can I achieve this using CSS?
using an unicode char
.test:after {
content: '\2807';
font-size: 100px;
}
<div class="test"></div>
using background property
div {
width: 100px;
height: 100px;
background-image: radial-gradient(circle, black 10px, transparent 11px);
background-size: 100% 33.33%;
}
<div></div>
shadow
div {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
box-shadow: 0px 40px 0px black, 0px 80px 0px black;
}
<div></div>
pseudo elements
div {
position: relative;
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
}
div:before, div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
background-color: inherit;
border-radius: inherit;
}
div:before {
top: 40px;
}
div:after {
top: 80px;
}
<div></div>
Try this complete source code for 3 dot menu:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Three Dot Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
*{margin: 0;padding:0px}
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
background-color: #0d77b6 !important;
border:1px solid #0d77b6 !important;
text-shadow: none !important;
color:#fff !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #fff;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropbtn {
background-color: #4CAF50;
position: fixed;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdown-content {
display: none;
position: relative;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<div class="header">
<!-- three dot menu -->
<div class="dropdown">
<!-- three dots -->
<ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()">
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</body>
</html>
If you are using font-awesome, it is as easy as including the .fa-ellipsis-v style. Further documentation is found here: http://fontawesome.io/icon/ellipsis-v/.
Unicode includes ⠇ which is the Braille symbol for the letter "U". To use, just use the HTML entity ⠇ in your code.
Most voted answer showed me with dotted with 2 column, So I accomplished with below Unicode character.
<div>︙</div>
︙
With fontawesome.css
<i class='fa fa-ellipsis-v'></i>
With Glyphicons
<span class="glyphicons glyphicons-option-vertical"></span>
With css
.textSpan:after {
content: '\2807';
font-size: 3em;
color: #2e2e2e
}
HTML
<div class="dot"></div>
css:
.dot{
width: 10px;
height: 10px;
background: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<script> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link></script>
<i class="fa fa-ellipsis-v col-2 mt-3 .text-light fa-lg" style={{"float":"right"}}></i>
This can be used to see three dots.This can be used in cards in react