I'm not understanding as to why the triangle which appears when the mouse hovers over the menu item, does not come up the same shade of grey as the pop-up menu itself. Any clues as to whats happening here?
Both CSS attributes are set to border-bottom-colour:#eee; for the triangle, and the background colour for the menu background as background-color:#eee;. however, it still results as pictured.
#slide-down-banner ul li:hover ul.main-menu-scroll-dropdown{
display:block;
width:100%;
background-color:#eee!important;
left:0;
right:0;
color: black;
border-bottom-style:solid;
border-width:5px;
border-color:#3A83F3;
padding:30px;
padding-bottom:20px;
-webkit-box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
}
#slide-down-banner ul li:hover > a:after {
content: "";
display: block;
border: 12px solid transparent;
border-bottom-color:#eee!important;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}
That darker grey is caused by the box-shadow on top of the triangle:
box-shadow: -1px 9px 22px 0px rgba(0,0,0,0.75);
You might want to try and use z-index to put the triangle on top of the shadow:
#slide-down-banner ul li:hover > a:after {
// ...
z-index: 999;
}
Related
I want to add a box shadow to a button with a border radius but the shadow itself should lie below the button and within its width range.
I was able to get the rounded border shadow but when trying to position it within the elements width range the border radius effect was lost and instead I got only the shadow without the border radius.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
}
<button class="but1">
Click me!
</button>
The example of what I got till now is linked below.
Sample output in jsfiddle
Your box-shadow is being cropped because of the negative spread (the last parameter in your box-shadow declaration)
If what you want is a rounded shadow the exact same width of the element, then setting spread to zero and taking 10px out of the vertical offset to compensate will do.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
If what you want instead is a shadow that keeps the rounded borders but is shorter than the element width, you can draw a shorter pseudo-element positioned behind it, and apply the box-shadow to the pseudo-element
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
position:relative;
}
.but1:before{
content:"";
position:absolute; top:10px; bottom:10px; left:10px; right:10px;
border-radius:10px;
z-index:-1;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
Add 0px to the box-shadow
.but1 {
width: 100px;
height: 50px;
border: none;
background-color: yellow;
border-radius: 100px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 9px;
}
<button class="but1">
Click me!
</button>
I used :after to achieve this, just an idea, you can play around with the css as wish.
Code:
.but1{
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
/* -webkit-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
-moz-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
box-shadow: rgba(0,0,0,0.8) 0px 3px 9px;*/
}
.but1:after {
content: "";
position: absolute;
left: 16px;
width: 84%;
bottom: 37px;
z-index: -1;
border-radius:10px;
transform: scale(.9);
box-shadow: -1px 20px 14px 20px rgba(0,0,0,0.8);
}
<button class="but1">
Click me!
</button>
Update Your Css Like this.
.but1 {
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
-moz-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
float:left;
}
I am working on our restaurant web and I am trying something new for showing the menu. I use hover to show a bigger image when hovering over a thumbnail. I am satisfied with the layout and functionality but I am concerned about load time when all menu items are up.
The problem I see is that all pictures are loaded when the page are loaded and just made invisible until you hover the thumbnail. I don't want to use JS because I don't want real popups that can be blocked.
Is there any other way to get the same effect with puse css?
Page is here http://www.thejunctioncafe-paphos.com/menu_junction_cafe.html
The CSS
ul.enlarge{
list-style-type:none;
margin-left:0px;
width: 700px;
margin:auto;
}
ul.enlarge li{
display:inline-block;
position: relative;
z-index: 0; /
margin:10px 10px 0 10px;
}
ul.enlarge img{
background-color:#eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
ul.enlarge span{
position:absolute;
left: -3999px;
background-color:#eae9d4;
padding: 10px;
font-family: 'Calibri', sans-serif;
font-size:.9em;
text-align: center;
color: #000;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{
top: -350px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}
ul.enlarge img, ul.enlarge span{
behavior: url(scripts/PIE.htc);
}
Popups are blocked when you use javascript to create the popup, not load the images. So just load the images with javascript after the page is complete. Then let your images popup as you have them now.
If you want to do it even better, load the image when the user hovers over a thumbnail in the pre-assumption he will click on it.
i suggest you leave it the way you have them because, as far as i can see, they are small images and will not affect the load time.
but with only CSS you could do something like this :
.menu-item:hover .more {
display:block;
background:url("http://www.thejunctioncafe-paphos.com/images/Breakfast-Roll.png") no-repeat scroll left top;
position:absolute;
height:100%;
width:100%;
top:0%;
}
.more {
display:none;
}
.menu-item {
width:200px;
height:200px;
}
<div class="menu-item">
<img src="http://www.thejunctioncafe-paphos.com/images/Breakfast-Roll_th.png" width="100" height="67" alt="Breakfast Roll">
<span class="more">MORE TEXT</span>
</div>
in this way the big image is loaded only after the :hover event on .menu-item and you can style it how you want. but you would have to write css ( background-image ) for all the .menu-items
In our dropdown menu, there are too many columns which tends to overflow to the right, outside of screen bounds:
Can I change the CSS or HTML to rather render the menu to the left if it's outside of screen bounds?
Here's the CSS of the 'Configurations' menu:
.dropdown_4columns, .dropdown_5columns {
margin: 4px auto;
float: left;
position: absolute;
left: -999em;
text-align: left;
padding: 10px 5px 10px 5px;
border: 1px solid #ccc;
border-top: none;
background: #fff;
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
-webkit-box-shadow: 0px 3px 3px #ccc;
box-shadow: 0px 3px 3px #ccc;
}
Example: https://jsfiddle.net/ap8ntctt/
Change margin: 4px auto; to margin:4px auto 4px -200px;
jsfiddle: https://jsfiddle.net/mk1427q3/
Your dropdown is absolute positioned so change left position and make it such that drop down will be centered in this case.li:hover .dropdown_2columns{left:87;top:auto;}
https://jsfiddle.net/mk1427q3/5/
Ideally your drop down should not overflow from the view port make it center align if its two big you can refer leading e-commerce sites to check how they manage there big drop downs without overflowing outside.
I have one problem with my CSS code.
The problem is active link sliding down.
This is my DEMO page link from codepen .
If you check my DEMO page then you see blue border color active links. I want that links come on the al the images. But now 5,6,7 numbers picture active link blue border sliding down. What can i do here anyone can help me?
.slider-control-nav a {
display: inline-block;
width: 96px;
height: 71px;
float:left;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
text-indent: -9999px;
margin-left:16px;
margin-top:5px;
}
.slider-control-nav a.active {
border:2px solid #3978f5;
opacity:1;
box-shadow:inset 0px 0px 10px 3px #777777;
-moz-box-shadow:inset 0px 0px 10px 3px #777777;
-webkit-box-shadow:inset 0px 0px 10px 3px #777777;
width: 97px;
height: 72px;
}
.imgtmb img {
width:97px;
height:auto;
border-radius:3px;
-webkit-border-radis:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.imgtmb {
float: left;
width: 97px;
height: 72px;
margin-left: 16px;
margin-top: 6px;
}
Move slider-control-nav section from within img_tb and place it above.
Increase .container's width to not force the images below
Would someone show me how to highligh parent and child navigation menu when active or current. Is it possible to highlight the parent menu item when a child page is selected. what i am trying to achieve is something like http://www.brotfabrik-berlin.de/ when you hover to a subpage the parent keeps being highlighted. Thank you.
#menu {
font-weight:700;
list-style:none;
width:990px;
margin:0px auto 0px auto;
height:29px;
padding:0px 0px 0px 0px;
/* Rounded Corners */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #, #);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px 4px 5px;
margin-right:0px;
margin-top:0px;
border:none;
z-index: 1;
#menu li:hover {
border: 1px solid #777777;
padding: 2px 4px 4px 4px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
#menu li a {
font-family:Arial Narrow;
font-size:15px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 0px 0px 0px #000;
#menu li:hover a {
color:#161616;
text-shadow: 0px 0px 0px #ffffff;
I would usually achieve this by adding a current class to the <li> of the navigation link. So if you are viewing home.html the navigation code would be like so:
<ul id="menu">
<li class="current">Home</li>
<li>About</li>
<li>Another page</li>
</ul>
Then I would style the current class by using the hover style of the link, or you could define a different style, for example:
#menu li.current a {
font-weight: bold;
}
If the <li> contains a sub menu (another <ul>), I would target the CSS like this:
#menu > li > a {
/* this would target the parent link */
}
And to target submenu links I would do:
#menu ul ul a {
/* this would target submenu links */
}