I've made a horizontal accordions with background-images, but the images are quite big compared to the width of the accordions. I want the accordions to downsize the background-images, right now I'm only seeing the center of each background images.
Here's my code: (sample)
.accordion {
width: 100%;
max-width: 1080px;
height: 400px;
overflow: hidden;
margin: 50px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 400px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li:nth-child(1) {
background-image: url("https://images.unsplash.com/photo-1460500063983-994d4c27756c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=27c2758e7f3aa5b8b3a4a1d1f1812310");
}
.accordion ul li:nth-child(2) {
background-image: url("https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c");
}
.accordion ul li:nth-child(3) {
background-image: url("https://images.unsplash.com/photo-1458400411386-5ae465c4e57e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=47756f965e991bf72aa756b410929b04");
}
.accordion ul li:nth-child(4) {
background-image: url("https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c28fd5ea58ed2262a83557fea10a6e87");
}
.accordion ul li:nth-child(5) {
background-image: url("https://images.unsplash.com/photo-1452215199360-c16ba37005fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=408c70a6e88b50949c51e26424ff64f3");
}
.accordion ul li:nth-child(6) {
background-image: url("https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1920&h=1280&q=80");
}
.accordion ul:hover li {
width: 8%;
}
.accordion ul:hover li:hover {
width: 100%;
}
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#media screen and (max-width: 200px) {
body {
margin: 0;
}
.accordion {
height: auto;
}
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
.about {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #666;
}
.about a {
color: blue;
text-decoration: none;
}
.about a:hover {
text-decoration: underline;
}
<body>
<div class="accordion">
<ul>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
</ul>
</div>
<body>
Try setting a fixed width for your images to see the full image instead of just the center of it.
see fiddle.
If you will be using huge images, I would be better to use
background-size:cover instead.
As you're currently using the images as background, you have a handy CSS property available to you right now.
MDN - Background Size: Contain:
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
Related
This is my css code (for the index page):
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
/*NAVBAR (begin)*/
a {
text-decoration: none;
}
nav {
font-family: Arial;
background-color: Black;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
display: block;
float: left;
padding: 27px;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 27px;
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%;
}
/*NAVBAR (end)*/
This is the code for HTML (index page):
<!DOCTYPE html>
<link rel="stylesheet" href="piano.css" />
<html class="index">
<head>
<title>The piano - Home</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li>Home</li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li>Mechanics</li>
<li>Construction</li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li>Grand</li>
<li>Upright</li>
<li>Electric</li>
</ul>
</li>
<li>History of the piano
</li>
<li>Piano songs
</li>
</div>
</nav>
<!--(end)NAVBAR-->
</body>
</html>
I already tried a lot of things but nothing seems to work...
Right now my index page looks like this:
(Index page but I had to cut it because the full picture was over 2 mb)
(I'm sorry, It's really bad but it's my first time making a website with html and css).
I need to center the navigation bar and to be able to click the box instead of the word.
Thank you for reading (and maybe answering)!
First of all, I recommend to use classes instead of the direct element selector,
If you want to center the nav, you only need to set the property align-text: center in the parent divof the main nav. and if you want to click all the box instead only the text, the element that needs the padding and margin is the a not the li.
Check the snippet:
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
.navwrapperindex {
text-align: center;
}
.navwrapperindex > nav{
display: inline-block;
}
a {
text-decoration: none;
}
nav {
font-family: Arial;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
float: left;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
padding: 27px;
display: block;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
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%;
}
<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li>Home</li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li>Mechanics</li>
<li>Construction</li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li>Grand</li>
<li>Upright</li>
<li>Electric</li>
</ul>
</li>
<li>History of the piano
</li>
<li>Piano songs
</li>
</ul>
</nav>
</div>
</nav>
* {
margin: 0;
padding: 0;
border: 0;
}
.navBar {
background-color: #2A2A2A;
min-width: 100%;
}
.wrapper {
max-width: 100%;
padding: 0 10px;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding-top: 15px;
}
nav ul a {
color: #7f7f7f;
text-decoration: none;
transition: color .4s ease;
font-size: 18px;
}
nav ul li ul li a{
font-size: 15px;
}
nav ul a:hover {
color: #afafaf;
}
nav li {
display: inline-block;
}
nav #menu-toggle {
display: none;
}
nav .label-toggle {
display: none;
}
nav .wrapper {
align-items: center;
display: flex;
}
#media screen and (max-width: 1366px) {
nav nav ul li ul li {
color: #7f7f7f;
padding-right: 20px;
}
nav ul {
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: left;
padding-left: 0;
transition: height 1s ease;
width: 50%;
visibility: hidden;
}
nav li {
color: #53354A;
display: block;
font-size: 19px;
}
nav #menu-toggle:checked ~ ul {
opacity: 1;
height: 150px;
visibility: visible;
}
nav .label-toggle {
background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
cursor: pointer;
display: block;
float: right;
height: 35px;
margin-top: 35px;
width: 35px;
}
nav .wrapper {
display: block;
}
}
<nav class="navBar">
<nav class="wrapper">
<img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt="">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="label-toggle"></label>
<ul class="ulDropMenu">
<li>
Menu 1
</li>
<li>
<a href="#">Menu 2
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
</ul>
</li>
<li>
<a href="#">Menu 3
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
<i class="fab fa-facebook-square"></i> Facebook
<i class="fab fa-twitter-square"></i> Twitter
<i class="fab fa-instagram"></i> Instagram
</li>
</ul>
</li>
</ul>
</nav>
</nav>
The menubar is appearing outside of the navbar before the navbar collapse (see image bellow), this should not happen, this should look like this: https://codepen.io/user236945896/pen/EdaaEe
Unfortunately i can't use JavaScript on this, so i'm trying to make a collapsible menu using only CSS for some purposes.
How can i fix it?
You need to set overflow: hidden on your ul element. This will hide any child elements that overlap its parent's borders. Additionally this means you can remove the visibility: hidden and opacity: 0 from your ul and nav #menu-toggle:checked ~ ul element as all its contents will be hidden when the height is 0.
#media screen and (max-width: 1366px) {
...
nav ul {
display: block;
height: 0;
list-style-type: none;
text-align: left;
padding-left: 0;
transition: height 1s ease;
width: 50%;
overflow: hidden;
}
...
nav #menu-toggle:checked ~ ul {
height: 150px;
}
...
Making a slide down drop menu animation, if I set max height to 100% the <ul> will only extend its height to the first nested <li>. I can set the max-height in the Keyframe to 400%, but this causes to animation to go twice as fast in other drop downs with less submenus. The height of the <ul> before I hover over seems to be the full size when debugging, not sure why it gets limited in the animation.
And as a secondary question, will I run into browser support issues using animations like this?
JSFiddle
#keyframes slideDown {
0% {
max-height: 0%;
opacity: .2;
}
100% {
max-height: 400%;
opacity: 1;
}
}
#menuTabs {
float: left;
position: absolute;
margin-left: 0px;
background: #256AAA none repeat scroll 0% 0%;
width: 100%;
overflow: visible;
}
#menuTabs ul {
left: 50%;
margin: 0px;
clear: left;
float: left;
padding: 0px;
font-size: 15px;
position: relative;
text-align: center;
font-family: helvetica;
list-style: outside none none;
}
#menuTabs ul li {
margin:0;
padding:0;
right:50%;
float:left;
display:block;
list-style:none;
min-width: 170px;
max-width: 170px;
position:relative;
}
#menuTabs ul li a {
color:#000;
display:block;
background:#ddd;
padding:0px 50px;
line-height:1.3em;
text-decoration:none;
font-family:'Oxygen', sans-serif;
color: #FFF;
margin-top: 0px;
font-weight: bold;
padding: 15px 50px;
text-decoration: none;
background: #Blue;
}
#menuTabs ul li:hover > a {
visibility: visible;
text-decoration: none;
background: #CCC;
}
ul#menu li.selected a {
color: #000;
background-color: #fff;
}
#menuTabs ul li ul {
margin: 0;
padding: 0;
width: 100%;
visibility: hidden;
overflow: hidden;
position: absolute;
left: 0%;
max-height: 0%;
}
#menuTabs ul li ul a {
z-index: 1;
display: block;
font-size: 12px;
max-width: 70px;
min-width: 120px;
min-height: 22px;
overflow: visible;
position: relative;
padding: 14px 25px;
background: #256AAA none repeat scroll 0% 0%;
}
#menuTabs ul li ul a:hover {
background: #CCC;
}
#menuTabs ul li:hover ul {
visibility: visible;
position: absolute;
background: #CCC;
}
#menuTabs ul li:hover ul {
max-height: 0%;
animation-name: slideDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#menuTabs ul li ul li {
left: 0%;
display: block;
}
<div id="menuTabs">
<ul id="menu">
<li> Services
<ul id="class">
<li id="srv1"> SubMenu
</li>
<li id="srv2"> SubMenu2
</li>
</ul>
<li>Resources
<ul>
<li> SubMenu2</li>
<li> SubMenu3</li>
<li> SubMenu4</li>
<li> SubMenu5</li>
</ul>
</li>
</li>
</ul>
</div>
I would do it by just using transition instead of keyframes for that, it runs smoother, and much easier. I haven't found a way to do the dynamic height thing, so I think you'll have to pick a height with the max number of items you're possibility going to have.
jsfiddle
#menuTabs ul li ul {
...
max-height: 0;
transition: all .1s ease-out;
opacity: .5;
}
#menuTabs ul li:hover ul {
...
max-height: 400%;
transition: all .25s ease-in;
opacity: 1;
}
I have this submenu and I would like it so that when the dropdown menu is out it has a width of 100% and covers the whole page. At the moment if I change the width to 100% it just makes it the same width as the main menu.
This is my current HTML:
<header>
<div class="header">
<div class="nav">
<ul>
<li> Services
<ul class="sub"> <a href="services.html#branddesign">
<li><img class="imgcenter" src="images/Brand-Design-Circle-Blue.png" width="100px" />
<br>
Brand Design
</li></a>
<a href="services.html#brandonline">
<li><img class="imgcenter" src="images/Brand-Online-Circle-Blue.png" width="100px" />
<br>
Brand Online
</li></a>
<a href="services.html#brandmarketing">
<li><img class="imgcenter" src="images/Brand-Marketing-Circle-Blue.png" width="100px" />
<br>
Brand Marketing
</li></a>
<a href="services.html#brandmanagement">
<li><img class="imgcenter" src="images/Brand-Management-Circle-Blue.png" width="100px" />
<br>
Brand Management
</li></a>
</ul>
</li>
<li> Clients
</li>
<li> About
</li>
<li> Contact Us
</li>
</ul>
</div>
</div>
</div>
and this CSS:
.header {
position: fixed;
display: block;
float: left;
width: 100%;
height: auto;
background-color: #666;
z-index: 9999;
}
.nav {
position: static;
float: left;
width: 500px;
height: 50px;
margin: 10px 5px;
}
.nav a {
text-decoration: none;
color: #FFFFFF;
}
.nav ul > li:first-child {
padding-bottom: 25px;
}
.nav a:hover {
text-decoration: none;
color: #6db6e5;
}
.nav li {
font-family: "eras_demi_itcregular", Arial, Helvetica;
list-style: none;
float: left;
margin-right: 50px;
}
.nav li:hover a:hover {
padding-bottom: 5px;
border-bottom: 2px solid #6db6e5;
color: #6db6e5;
}
.nav ul li:hover > ul {
height:150px;
}
.nav ul {
list-style: none;
position: absolute;
display: inline-block;
margin-top: 23px;
}
.nav ul ul {
width: 494px;
background: #7d7c7c;
height: 0px;
overflow: hidden;
padding-left:0;
margin-left:0;
font-size: 12px;
text-align: center;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.nav ul ul li {
padding: 10px;
margin-left: -1px;
margin-right: 0;
height: 129px;
}
.nav ul ul li:last-child {
}
.nav ul ul li:hover {
background: #666;
}
.nav li li {
height:130px;
-webkit-transition:all .3s ease-in-out;
}
Can anyone please tell me how I can make it so that the submenu can be wider than the main menu?
Try adding this to your CSS:
nav ul ul {
width: 100vw;
left: 0;
}
Fiddle: http://jsfiddle.net/9QE58/1/embedded/result/
That should keep it at 100% of the viewport width no matter what the pixel width is.
I tried making a dropdown menu only with css, now the problem is that my dropdown menu is hiding behing my content. I don't know why its not working, I tried using z-index but nothing worked. Here is a jsfiddle example and some code.
Please help me, thank you.
http://jsfiddle.net/42c6q/
HTML
<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="images/logo.png" alt="De Pannenkoekenbus Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">
</div>
</div>
</div>
CSS
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background: url("images/kaart_bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
/* MENU */
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
overflow: hidden;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 50px;
margin-left: 30px;
width: 130px;
text-align: center;
margin-top: 40px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 15pt;
}
#main_menu .logo{
background: none;
width: 224px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 12pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
}
In your #main_menu you have this overflow:hidden remove that:
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
/*overflow: hidden; Remove this*/
z-index: 2;
}
The demo http://jsfiddle.net/42c6q/2/
Remove overflow: hidden from #main_menu
working demo
#main_menu {
overflow: hidden; /*remove overflow */
}