I've recently made an update an older website of mine. I looks great in every browser but IE 11. I've backed it up and moved it somewhere where I can keep it active and not worry about people visiting it.
You can see it here
This is a wordpress website so I've taken out the links and the random classes wordpress gives as well so it's simple and to the point.
Here is the HTML of the side navigation bar
<ul id="side-navigation">
<div class="menu-side-nav-container">
<ul class="menu" id="menu-side-nav">
<li class="menu-item menu-item-type-post_type" id="menu-item-949">Trade-marks
<ul class="sub-menu">
<li class="menu-item" id="menu-item-950">Hiring a Registered Trade-mark Agent</li>
<li class="menu-item" id="menu-item-951">Preliminary Trade-mark Searches</li>
</ul>
</li>
<li class="menu-item" id="menu-item-939">Value Pricing</li>
<li class="menu-item" id="menu-item-80">Our Team</li>
<li class="menu-item" id="menu-item-87">Community</li>
<li class="menu-item" id="menu-item-86">Testimonials</li>
</ul>
</div>
</ul>
Here is the CSS
#side-navigation {
width: 100%;
font-family: Tahoma, Geneva, sans-serif;
text-transform: uppercase;
font-size: 1.1em;
letter-spacing: 2px;
line-height: 60px;
margin-bottom: 50px;
}
#side-navigation ul {
width: 289px;
list-style: none;
}
#side-navigation li {
clear: both;
list-style: none;
margin-left: -74px;
margin-bottom: -5px;
width: 257px;
height: 60px;
background: url(img/averylawoffice-extras.png) 0px -135px;
}
#side-navigation li a {
text-decoration: none;
color: #761616;
}
#side-navigation li a:hover {
color: #c7bd89;
}
.sub-menu {
background: url(img/BG.jpg) repeat;
left: -9999px;
letter-spacing: 0;
opacity: 0;
position: absolute;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
margin: -2.5em 0 0 7em;
width: auto!important;
z-index: 99;
border: 1px solid #742222;
padding: .7em;
}
.sub-menu a {
border-top: none;
position: relative;
padding: 1em;
width: auto!important;
}
.sub-menu li {
margin: -1em!important;
background: transparent!important;
width: 475px!important;
}
.menu-item:hover {
display: block;
position: static;
}
.menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}
This is how it is supposed to look
But this is what it looks like in IE 11
Is there another extra step I should be doing for IE 11?
UPDATED:
Here is a screenshot from her computer. She's using IE 11 on Windows 7.
Related
Is there any way with css or JavaScript to set an animation border when it is clicked or active in wordpress?
I want to make this effect on a ul lists.I'm using a filter product and i can't put a button inside li elements.
.btn{
border:none;
color: #FFFFFF29;
position: relative;
display: inline-block;
overflow: hidden;
padding: 0.5rem 0;
font-size:65px;
transition: .3s;
transition-delay: 0.5s;
}
.btn::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background-color: #fff;
transform: translateX(-105%);
transition: transform 0.5s ease-in-out;
transition-delay: 0.5s;
}
.btn:focus::before{
transform: translateX(0);
}
.btn:focus{
transition:.3s;
color:#fff;
transition-delay: 0.5s;
outline: none;
background-color: transparent;
}
.btn:not(hover){
color: #FFFFFF29 ;
background-color: #1a1a1a;
}
ul {
background-color:#1a1a1a;
list-style-type: none;
}
<ul>
<li><button class="btn" >Digital Marketing</button></li>
<li><button class="btn" >Sviluppo</button></li>
</ul>
Elementor Class Add into a tag
.btn:not(hover){
color: var(--e-global-color-secondary) !important;
background-color: #1a1a1a;
}
I have the following CSS and want to slow the displayLnone attribute when it goes off hover but the transitions don't seem to be working.
CSS:
.dropdown .dropdown-menu
{
position: absolute;
top: 38px;
left: -15px;
display: none;
margin: 0;
list-style: none;
width:200px;
border:1px solid #759931;
padding: 0;
background: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
z-index:10000;
-webkit-transition: all 5000ms ease;
-moz-transition: all 5000ms ease;
-ms-transition: all 5000ms ease;
-o-transition: all 5000ms ease;
transition: all 5000ms ease;
}
.dropdown:hover .dropdown-menu
{
display: block;
}
A JSFiddle would be helpful.
display cannot be transitioned or animated. Use opacity or transform: scale() according to your likings. Here's an example using opacity:
.dropdown .dropdown-menu {
position: absolute;
top: 38px;
left: -15px;
opacity: 0;
margin: 0;
list-style: none;
width: 200px;
border: 1px solid #759931;
padding: 0;
background: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
z-index: 10000;
-webkit-transition: all 5000ms ease;
-moz-transition: all 5000ms ease;
-ms-transition: all 5000ms ease;
-o-transition: all 5000ms ease;
transition: all 5000ms ease;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}
/* demo styles */
.dropdown {
background-color: #f0f0f0;
position: relative;
height: 30px;
width: 200px;
}
<div class="dropdown">Hover me
<div class="dropdown-menu">My beautiful menu</div>
</div>
.dropdown {
padding: 5px;
background: tomato;
position: relative;
}
.dropdown .dropdown-menu {
position: absolute;
transition: all 500ms ease-in-out;
opacity: 0;
visibility: hidden;
background: white;
border: 1px solid peru;
padding: 10px;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
<div class="dropdown">
Hover
<div class="dropdown-menu">Menu</div>
</div>
Key bits are opacity: 0 and visibility: hidden, and then opacity: 1 and visibility: visible on hover. That will create the transition/fade-in look you're going for.
transition and animate only work on certain properties (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties ). You have to use height/width, opacity, etc.
It should also be noted, if using height or width, the keyword auto cannot be transitioned to or from.
Edit:
li>ul.height {
max-height: 0;
overflow: hidden;
}
li:hover>ul.height {
max-height: 200px;
}
li>ul.opacity {
opacity: 0;
}
li:hover>ul.opacity {
opacity: 1;
}
/* Basic Stuff */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div>ul>li {
display: inline-block;
position: relative;
padding: .5em;
}
li>ul {
position: absolute;
left: 0;
transition: all ease 2s;
}
a {
display: block;
padding: .5em;
}
<div>
<ul>
<li>Sublist Height
<ul class="height">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>
<li>Sublist Opacity
<ul class="opacity">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>
</ul>
</div>
The display property is not animatable. You can read the list of animatable properties (which translates to: properties that can be used transitions/animations) right here: CSS Animatable
How to central align navbar from here
I tried:
.dropdownmenu li {
**float: center;**
position: relative;
width:auto;
**text-align: center;**
also with
div#nav{
text-align: center;
}
div#nav ul{
display: inline-block;
}
disclaimer: I have no experience in css. If it's obvios please close the question with reference.
The common way to horizontally center block-level elements is using margin: 0 auto;:
.dropdownmenu {
margin: 0 auto;
}
But this requires a specific width. In your case, it would be better to define a container element and set text-align: center;. I would recommend to not using floats here! Just make your <li> elements display: inline-block;.
Here is a working example (watch in fullscreen):
.container {
text-align: center;
}
.dropdownmenu ul,
.dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
}
.dropdownmenu li {
display: inline-block;
position: relative;
width: auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 15px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
/* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color: #000000;
}
<div class="container">
<nav class="dropdownmenu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Articles on HTML5 & CSS3
<ul id="submenu">
<li>Difference between SVG vs. Canvas</li>
<li>New features in HTML5</li>
<li>Creating links to sections within a webpage</li>
</ul>
</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
Adjust css like below
.dropdownmenu {text-align:center}
.dropdownmenu ul {
background: gray;
list-style: none;
width: auto; display:inline-block
}
Update your CSS:
body {
text-align: center;
}
.dropdownmenu {
display: inline-block;
margin: 0 auto;
}
or
.dropdownmenu {
text-align: center;
}
.dropdownmenu ul {
display: inline-block;
width: auto;
margin: 0 auto;
}
.container {
text-align: center;
}
.dropdownmenu ul,
.dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
text-align:center;
}
.dropdownmenu li {
display: inline-block;
position: relative;
width: auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 15px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
/* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color: #000000;
}
<div class="container">
<nav class="dropdownmenu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Articles on HTML5 & CSS3
<ul id="submenu">
<li>Difference between SVG vs. Canvas</li>
<li>New features in HTML5</li>
<li>Creating links to sections within a webpage</li>
</ul>
</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
I'm building a hamburger menu for a mobile website using only html and css. You can view the code here on codepen.io.
<html>
<body>
<nav>
<button class="hamburger"><span></span></button>
<div class="close"></div>
<ul class="menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Google</li>
</ul>
</nav>
</body>
</html>
As you can see from line 106 in the css part
.hamburger:focus ~ .menu {
visibility: visible;
}
the menu is visible when the button is in focus. The Problem is that as soon as you click on a menu item, the button gets out of focus and the menu disappears before the click can be processed.
I already tried to write rules for the focussed menu, but it did not help.
Please let me know if you need any additional information.
Thank you in advance for your effort.
add transition visibility on your menu class. see the updated class below.
.menu {
position: absolute;
margin: 0;
padding: 10px;
width: auto;
height: auto;
visibility: hidden;
list-style: none;
background-color: #333;
transition: visibility 0.5s;
}
.menu a {
color: #87BF58;
display: block;
text-decoration: none;
}
.hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
height: 3rem;
width: 3rem;
z-index: 500;
text-indent: 0;
appearance: none;
box-shadow: none;
border-radius: 0;
border: none;
cursor: pointer;
transition: background 0.3s;
background-color: yellowgreen;
}
.hamburger:focus {
outline: none;
background-color: green;
}
.hamburger span {
display: block;
position: absolute;
top: 45%;
left: 25%;
right: 25%;
height: 10%;
background: white;
transition: background 0s 0.3s;
}
.hamburger span::before,
.hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
content: "";
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.hamburger span::before {
top: -210%;
transition-property: top, transform;
}
.hamburger span::after {
bottom: -210%;
transition-property: bottom, transform;
}
.hamburger:focus span {
background: none;
}
.hamburger:focus span::before {
top: 0;
transform: rotate(45deg);
}
.hamburger:focus span::after {
bottom: 0;
transform: rotate(-45deg);
}
.hamburger:focus span::before,
.hamburger:focus span::after {
transition-delay: 0s, 0.3s;
}
.close {
position: absolute;
height: 3rem;
width: 3rem;
margin-top: -3rem;
z-index: 501;
background-color: transparent;
cursor: pointer;
visibility: hidden;
}
.hamburger:focus ~ .menu {
visibility: visible;
}
.hamburger:focus ~ .close {
visibility: visible;
}
<nav>
<button class="hamburger"><span></span></button>
<div class="close"></div>
<ul class="menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Google</li>
</ul>
</nav>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to use just the button on the right:
http://cssdeck.com/item/preview/343/css-text-switcher
What code do I take to have just that button and not the first? I'm struggling because of all the descendant selectors..
HTML (relevant code only):
<nav>
<ul>
<li>
<a href="#">
<span>Want to learn more?</span>
<span>Send us an email :)</span>
</a>
</li>
</ul>
</nav>
CSS (relevant code only):
ul {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 30px;
margin: -15px 0 0 -160px;
list-style: none;
font: .75em "lucida grande", arial, sans-serif;
}
a {
position: absolute;
width: 150px;
height: 100%;
text-decoration: none;
}
a span {
position: absolute;
width: 100%;
text-align: center;
line-height: 30px;
}
li a {
overflow: hidden;
right: 0;
color: #fff;
}
li span {
-webkit-transition: top .3s ease-out;
-moz-transition: top .3s ease-out;
-o-transition: top .3s ease-out;
-ms-transition: top .3s ease-out;
transition: top .3s ease-out;
}
li span:first-child {
background: #333;
top: 0;
}
li span + span {
background: #39f;
top: 30px;
}
li a:hover span:first-child {
top: -30px;
}
li a:hover span + span {
top: 0;
}
JSFiddle
HTML
<nav>
<ul>
<li>
<a href="#">
<span>Want to learn more?</span>
<span>Send us an email :)</span>
</a>
</li>
</ul>
</nav>
CSS
* {
padding: 0;
margin: 0;
}
ul {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 30px;
margin: -15px 0 0 -160px;
list-style: none;
font: .75em "lucida grande", arial, sans-serif;
}
a {
position: absolute;
width: 150px;
height: 100%;
text-decoration: none;
}
a span {
position: absolute;
width: 100%;
text-align: center;
line-height: 30px;
}
li a {
overflow: hidden;
right: 0;
color: #fff;
}
li span {
-webkit-transition: top .3s ease-out;
-moz-transition: top .3s ease-out;
-o-transition: top .3s ease-out;
-ms-transition: top .3s ease-out;
transition: top .3s ease-out;
}
li span:first-child {
background: #333;
top: 0;
}
li span + span {
background: #39f;
top: 30px;
}
li a:hover span:first-child {
top: -30px;
}
li a:hover span + span {
top: 0;
}
I did it like this: http://cssdeck.com/t/uHhhprW6