how can I create menu like on the picture?
Requirements:
Built using Bootstrap columns, must be responsive
In normal state, only Option and icon (green square) can be seen
OnHover: The Suboption (in blue rectangle) expands pushing Option up and also Caption in red rectangle appears, also pushing the whole Option up.
When one Menu item is hovered, all the others must stay down, not moving
Expanding with animation
Here's my fiddle attempt: http://jsfiddle.net/52VtD/7878/
HTML of one item (all are wrapped in a row):
<div class="col-xs-12 col-sm-3 nopadding item">
<div class="mask">
<div class="inner-wrapper">
<p>Option A</p>
<div class="hidding-guy">
<p>Hello</p>
Suboption
Suboption
Suboption
</div>
<i class="origami o-01"></i>
</div>
<div class="btn-red ">CAPTION</div>
</div>
</div>
CSS:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.footer-menu-wrapper {
background: #ddd;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
}
.footer-menu-wrapper .item {
position: relative;
}
.footer-menu-wrapper .item:hover .hidding-guy, .footer-menu-wrapper .item:hover .hidding-guy > * {
height: auto;
}
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
}
.footer-menu-wrapper .mask .hidding-guy {
height: 0px;
}
.footer-menu-wrapper .mask .hidding-guy > * {
display: block;
height: 0px;
}
.btn-red {
background: #e91333;
color: #fff;
width: 100%;
min-height: 66px;
border: 0px transparent;
text-align: center;
}
Alter your css to:
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
position: absolute;
background-color: #ddd;
bottom: 0;
}
now it behave like a dropup menu. Keep in mind that you must reset the positioning for the responsive layout like:
#media (max-width: 768px){
.footer-menu-wrapper .mask{
position: relative;
}
}
DEMO
UPDATE DEMO with media query
UPDATE:
Hide the CAPTION - opacity: 0 and show it on hover.
Second hide the options - visibilety: hidden and also show it on hover.
This ist a quick solution! The rest should be simple css styling
DEMO
Related
I have two buttons that appear side by side. The idea is that whenever the screen width changes, the buttons will grow or shrink accordingly. This is working fine. However, I'd like to have a 10px distance between the buttons, no matter what the screen width is. In my case as the screen width grows, the gap also grows which I'd like to avoid.
Here is the test code I have been working with:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
}
a.left, a.right {
display: block;
width: 49%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
float: left;
}
a.right {
float: right;
}
</style>
</head>
<body>
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
</body>
</html>
I can tell that giving a 1% to the gap will make it grow with the screen, but I'm trying to find a way of giving the gap a fixed size while having the button behave as expected.
EDITED TO ADD: I'm looking for a solution which not only would keep the gap fixed but that will also keep the left and right margins fixed as well. So 5px space to edge, button, 10px gap, button, 5px space to edge.
Thanks for any help you can provide.
I have a solution in this fiddle.
HTML
<div class="buttons">
<div class="button-container">
<a class="button">first</a>
</div><div class="button-container">
<a class="button">second</a>
</div>
</div>
CSS
.buttons {
width: 100%;
box-sizing: border-box;
padding: 0;
}
.button-container {
display: inline-block;
width: 50%;
box-sizing: border-box;
border: none;
padding: 0;
margin: 0;
}
.button {
display: block;
box-sizing: border-box;
background-color: #f00;
text-align: center;
padding: 5px;
}
.button-container:nth-child(odd) .button {
margin-right: 5px;
}
.button-container:nth-child(even) .button {
margin-left: 5px;
}
Key points to take home. Firstly, you need to avoid any whitespace between the inline-block elements .button-container to avoid a rendered space. Otherwise, setting width:50% will end up wrapping (because your have two 50% wide items with an intervening space, which is more that 100% width). Secondly, using .button-container allows you to evenly split the buttons across the page using a set percentage. The spacing between buttons then becomes a margin interior to the container.
That's due to the fact that you links are aligned to the outer borders (via float), not to each other. To change it the way you want, remove the floats and center them, plus add a 10px margin-right on the left one:
(for the snippet I reduced the width to 48% since otherwise it won't fit into a small screen)
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
text-align: center;
}
a.left, a.right {
display: inline-block;
width: 48%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
margin-right: 10px;
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
So here's a new version, fulfilling your later added additional requirements.
It gives the buttons absolute position and defines their width by defining their left and right borders 5px from the outer border and 5px each from the center (adding up to a 10px distance between them), using calc:
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
height: 1.6em;
}
a.left, a.right {
position: absolute;
display: block;
background-color: #f00;
text-align: center;
}
a.left {
left: 5px;
right: calc(50% + 5px);
}
a.right {
right: 5px;
left: calc(50% + 5px);
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
So I am wanting to change the position of an image that appears with the hover effect. Right now the image kind of just goes under the first image that holds the hover effect. I am struggling with this hardcore. I have tried positioning it and floating it and just simple left:90px or right:90px but the image that shows upon hovering doesn't budge. Here is a jsfiddle. The images are broken but you can get the jist. https://jsfiddle.net/k0fvbcno/ Any help would be greatly appreciated.
<div id="pain1">
<img class="pain1" src="images/painspot.png">
<img class="shoulder" src="images/shoulder.png">
</div>
<div id="pain2">
<img class="pain2" src="images/painspot.png">
<img class="back" src="images/back.png">
</div>
<div id="pain3">
<img class="pain3" src="images/painspot.png">
<img class="hip" src="images/hip.png">
</div>
#pain1 {
position: absolute;
left: 710px;
top: 220px;
margin: auto;
}
.shoulder {
display: none;
}
.pain1:hover + .shoulder {
display: inline;
}
.pain1:hover{
border: 3px solid transparent;
display: block;
}
#pain2 {
position: absolute;
left: 627px;
top: 390px;
margin: auto;
}
.back {
display: none;
}
.pain2:hover + .back{
display: inline;
}
.pain2:hover{
border: 3px solid transparent;
display: block;
}
#pain3 {
position: absolute;
left: 680px;
top: 425px;
}
.hip {
display: none;
}
.pain3:hover + .hip{
display: inline;
}
.pain3:hover {
border: 3px solid transparent;
display: block;
}
I figured it out finally. I needed to use position absolute and that finally enabled me to position the image that appeared when the hover effect was in use. Thanks!
I am working on a print style sheet in Chrome. It works properly in Firefox and IE, but when I try to print the following page in Chrome:
http://jsfiddle.net/htveL/2/
It prints as though the page is 8" x 10.5" instead of 8.5" x 11". For example, the two badges are 4" each, but they take up the full width of the page. They should have a .5" gap on the right side of the page.
My goal is to print two badges per page, each 4" wide and 2" tall. I would like the badges to be 7" from the top of the page and left aligned.
The .top and .bottom classes are there to show me where the top and bottom of each page is. The .bottom class should be across the bottom of each page, but it appear .5" onto the next page.
<div class="book">
<div class="page">
<div class="top">test</div><div class="bottom">bottom</div>
<div class="badge">A</div><div class="badge">B</div>
</div>
<div class="page">
<div class="top">test</div><div class="bottom">bottom</div>
<div class="badge">A</div><div class="badge">B</div>
</div>
<div class="page">
<div class="top">test</div><div class="bottom">bottom</div>
<div class="badge">A</div><div class="badge">B</div>
</div>
</div>
And here is the CSS:
#page {
size: 8.5in 11in;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
.page {
height: 11in;
position: relative;
margin: 0;
page-break-after: always;
-webkit-region-break-inside: avoid;
}
.top {
border: 1px solid black;
width: 100%;
top: 0px;
}
.bottom {
border: 1px solid black;
width: 100%;
position: absolute;
bottom: 0px;
}
.badge {
position: absolute;
border: 1px solid black;
display: inline-block;
top: 8in;
width: 4in;
height: 2in;
margin: 0 0 0 0;
padding: 0px;
}
.badge + .badge {
left: 4in;
}
Thanks in advance,
Todd
You could try adding:
* {
margin: 0;
padding: 0;
}
to the very top of the css to reset all the browser defaults
How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.
Thank you!
Update
This needs to be placed on top of a bg image so the gaps around the logo must be transparent.
Sorry guys this one is a little tricky I know...
Here's the PNG
Well, if you're background is totally plain then it's relatively straight forward.
The HTML
<header>
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</header>
The CSS
body {
margin: 0;
background: white;
}
#logo {
width: 200px; /* Width of image */
padding: 40px; /* Creates space around the logo */
margin: 0 auto; /* Centers the logo */
background: white; /* Must be same as body */
position: relative; /* Brings the div above the header:after element */
}
#logo img {
display: block;
}
/* :after pseudo element to create the horizontal line */
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
Working demo here.
EDIT
For situations where the body (or containing div) is not a solid colour, try the following:
HTML
<div id="header">
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</div>
CSS
body {
margin: 0;
}
#logo {
width: 100%;
}
#logo, #logo:before, #logo:after {
float: left;
}
#logo:before, #logo:after {
content: '';
width: 50%;
min-height: 100px; /* height of image */
border-bottom: 1px solid #ccc;
margin-top: -50px;
}
#logo:before {
margin-left: -120px;
}
#logo:after {
margin-right: -120px;
}
#logo img {
float:left;
padding: 0 20px;
}
Working demo here.
OR even an example based on display: table, but this goes a bit wonky when resizing.
http://jsbin.com/ITAQitAv/10/edit
This would be one approach:
.hr {
height: 50px; /* imageheight */
background: #fff url(http://placekitten.com/100/50) no-repeat center;
}
.hr hr {
top: 50%;
position: relative;
}
<div class="hr"><hr /></div>
This would be another:
.hr2{
display: block;
border-top: 2px solid black;
height: 2px;
}
.hr2 img {
display: block;
margin: auto;
margin-top: -31px; /*img-height /-2 + height / 2 */
/* adjustments for 'margin' to border */
padding: 0 20px;
background: #fff;
}
<div class="hr2"><img src ="http://placekitten.com/100/60"></div>
Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview
I have an element that looks something like this:
___
| X|
‾‾‾
So essentially a tiny box with a button to close it.
I have also applied CSS to the element, so that when hovered, it will turn to something like this:
___________________
| X|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Simply put, it'll just become wider.
Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.
Is this possible with pure CSS?
EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34
Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! http://jsfiddle.net/fpY34/15/
<div id='outer'>
<div id='notOuter'>
<div id='content'>
<div id='img'>
</div>
<div id='label'>
Text example
</div>
<div id='closeButton'>
X
</div>
</div>
</div>
</div>
and the beauty:
#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;}
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }
would you check this please and tell me if that what you want ?
http://jsfiddle.net/UjPtv/10/
<style>
.divs
{
height: 20px;
width: 100px;
border: 1px solid;
padding: 5px 3px;
}
.divs:hover
{
width: 50px;
padding-left: 150px
}
</style>
<div class="divs"><span>X</span></div>
You could float them:
<div class="box">
<div>
Content
</div>
<span>X</span>
</div>
.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}
Might not work in older browsers though.