Dropdown Menu Won't work in Internet Explorer
Question
I slapped together some code and made a slide-y horizontal dropdown navbar, but the problem is that while it works in chrome and firefox, it won't work in internet explorer. Here's the code. I really appreciate all the help, everyone.
$(function () { $(".item").on("click", function () { $(this) .next().toggleClass("active"); }); $("#body").css("min-height", "100%"); });
section { width: 150%; margin: 0px auto; margin-left:-15px; font-family: Raleway, sans-serif; } .item{ font-size: calc(8px + .8vw); width:9%; height: 40px; float: left; border-right: 3px solid #333333; font: monospace; padding: 10px; cursor: pointer; background-color: #B9E3C6; transform: skew(-20deg); -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); text-align: center; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-family: Raleway, sans-serif; } .info{ font-size: calc(8px + .8vw); float: left; width:0%; height: 40px; background: #DEF9E3; visibility: hidden; font: monospace; background-color: gr; transform: skew(-20deg); -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); text-align: center; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); transition: width ease-out .3s, visibility ease-out .3s; white-space: nowrap; overflow:hidden; padding: 10px 0; font-family: Raleway, sans-serif; } .info.active{ visibility: visible; width:12%; font-family: Raleway, sans-serif; } .nitem{ font-size: calc(8px + .8vw); width:9%; height: 40px; float: left; border-right: 3px solid #333333; font: monospace; padding: 10px; cursor: pointer; background-color: #B9E3C6; transform: skew(-20deg); -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); text-align: center; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-family: Raleway, sans-serif; }
<section> <div class="item"> about <span style='font-size: 1.3vw;'>►</span></div> <div class="info">lab | research</div> <div class="item"> people <span style='font-size: 1.3vw;'>►</span></div> <div class="info">current | alumni</div> <div class="nitem"> publications</div> <div class="nitem"> contact</div> </section> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
1 answers
solution1
0 ACCPTED 2017-01-05 07:20:04
Well with Internet Explorer, you need to put some constraints on it or it's going to end in heartbreak.
Use a proper doctype such as (though there are many doctypes): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd ">
Then right below the doctype add the following line:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
The above meta tag ensures IE loads the same version for every user, regardless of what webbrowser they actually have installed. I like to load IE10.
You should also check out http://jqueryui.com/ and see what they have to offer in terms of cool doodads to help you present information with.
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.