My jquery dropdown menu is fails in IE7 or IE8 Compatibility view.
I use this jquery for the dropdown menu in the below link:
var timeout = 1000;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('.menu ul > li').bind('mouseover', jsddm_open)
$('.menu').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
http://www.urbanlifefeed.com/cruise_ulf/
And this is the css:
div.menu { height:49px;}
div.menu ul {
/*width:886px;
margin:0 7px;*/
width:921px;
margin:0;
background:url(images/nav_bg.gif) repeat-x 0 0;
float:left;
border-left: 1px solid #FFFFFF;
}
div.menu ul li {
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
font-size:21px;
line-height:49px;
padding:0 12px;
text-transform:uppercase;
float:left;
border-right: 1px solid #FFF;
position:relative;
}
div.menu ul li ul
{
position:absolute;
top:49px;
left:0;
width:280px;
border:0px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
background:url(images/sub_nav_bg.png) repeat 0 0;
z-index:999999 !important;
visibility:hidden;
float:none;
display:inline-block;
}
div.menu ul li ul li:hover {background:url(images/sub_nav_bg.png) repeat 0 0;}
div.menu ul li ul li
{
border:0px;
border-bottom:1px solid #f4c726;
width:256px;;
float:left;
}
div.menu ul li ul li a
{ color:#f4c726; text-transform:capitalize;}
div.menu ul li:hover{
background:url(images/nav_roll_bg.png) repeat-x center 0;
}
div.menu ul li a {
color:#FFF;
text-decoration:none;
float:left;
height:49px;
width:100%;
}
div.menu ul li a:hover{
color:#fbf0cc;
}
Looks to me like the menu is sitting behind the slider container. You could use the z-index attribute to ensure that the menu block always appears above the slider block. For example, the div that holds the slider you can set a z-index of 1, and then set the menu a z-index of 2 or above.
Related
<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>
When the mouse is clicked manually, li border become red, but how to auto click it with JavaScript?
This will do what you want.
In CSS, define .clicked style with red border.
In javascript, add listeners to detect clicks, which then adds the class clicked to the element.
document.querySelectorAll("li").forEach(li => {
li.addEventListener("click", function(event) {
event.target.classList.add("clicked");
});
});
<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover,
.sys_spec_text li .clicked { border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>
Please make it more clear. As I see from css, you show li border when it hovered. But then you ask about how to make the same with click. So it will lead to the situation when the element got border and further stay with it because there is no event to remove it.
Also you can use :active pseudo-class for anchor element that is the same as click js event.
If you want to immitate hover event you can listen to 'mouseenter'/'mouseleave' events to make the same as you did with css.
let listEls = [...document.querySelectorAll('.link')]
let firstLi = listEls[0]
/* === CLICK SECTION === */
// This is "click" event listener
listEls.forEach(e => {
e.addEventListener('click', event => {
console.log('link is clicked', event)
event.target.classList.add('selected')
})
});
// here we manually trigger "click" event on the first li
firstLi.click()
// The problem is that "selected" class has been added but if there is no method to remove it. Let's fix it
document.addEventListener('click', e => {
console.log(e)
if (!e.target.classList.contains('link')) {
listEls.forEach(el => el.classList.remove('selected'))
}
})
// Now if any li was clicked and has "selected" class, you can click anywhere else to remove it
/* === END CLICK SECTION === */
/* === HOVER SECTION === */
// To se how hover works comment the CLICK SECTION above and uncomment this HOVER SECTION
// DO not forget to comment hover rule for link in css
/*
listEls.forEach(e => {
e.addEventListener('mouseenter', e => {
console.log(e)
e.target.classList.add('selected')
})
});
listEls.forEach(e => {
e.addEventListener('mouseleave', e => {
e.target.classList.remove('selected')
})
});
*/
/* === END HOVER SECTION === */
.sys_spec_text {}
.sys_spec_text li {
float: left;
height: 28px;
position: relative;
margin: 2px 6px 2px 0;
outline: none;
list-style-type: none;
}
.sys_spec_text li a {
color: #db0401;
height: 24px;
padding: 1px 6px;
border: 1px solid #ccc;
background: #fff;
display: inline-block;
line-height: 24px;
}
/* If you want to check mouseenter/mouseleave events comment following block */
.sys_spec_text li a:hover {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
/* OR you can use :active pseudo-class, so then you have to disable js "click" event listener and comment :hover block above */
/*
.sys_spec_text li a:active {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
*/
.sys_spec_text li a.selected {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
<ul class="sys_spec_text">
<li><a class="link" href="javascript:void(0)" title="xl">xl</a><i></i></li>
<li><a class="link" href="javascript:void(0)" title="l">l</a><i></i></li>
</ul>
Use setInterval() method and check periodically and fire the event accordingly.
Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!
I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/
I'm trying to create a responsive mobile menu that kicks in when the browser width is 885 pixels. It does change from my main navigation to the responsive menu at that width however the correct CSS styling does not kick in until the browser is about 640 pixels wide.
Here is an example: http://www.concept82.com/DIS/menutest.html
The responsive menu does use javascript and I'm not very good with that. I found the menu and script off the internet a few years ago and I'm trying to make it work now. Thanks so much for any help!!
CSS for menu:
/* Responsive Mobile Menu */
.rmm {
display:block;
position:relative;
width:100%;
padding: 20px 0px 0px 0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family: 'Open Sans Condensed', sans-serif;
}
.rmm a {
color:#ebebeb;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
/* */
.rmm .rmm-main-list li {
display:inline;
padding:padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}
/*style*/
.rmm a {
color:#333333;
}
.rmm a:hover {
background-color: #6D0001;
}
.rmm .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
}
.rmm-toggled {
width:100%;
min-height:36px;
background-color:#B30000;
color: #FFFFFF;
}
.rmm-toggled-controls {
display:block;
height:36px;
color:#FFFFFF;
text-align:left;
position:relative;
}
.rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:16px;
color:#FFFFFF;
}
.rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}
.rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:#FFFFFF;
width:25px;
}
.rmm-toggled ul li a {
display:block;
width:100%;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #930709;
color:#FFFFFF;
background-color: #B30000;
}
.rmm-toggled ul li:first-child a {
border-top:1px solid #930709;
}
/*media queries*/
#media screen and (max-width: 885px) {
#nav {
display: none;
}
#mainnav {
width: 100%;
height: 150px;
}
.rmm {
visibility: visible;
z-index: 2;
}
#logo {
margin-left: 15px;
width: 50%;
float: none;
}
JavaScript for menu:
function responsiveMobileMenu() {
$('.rmm').each(function() {
$(this).children('ul').addClass('rmm-main-list'); // mark main menu list
/* width of menu list (non-toggled) */
var $width = 0;
$(this).find('ul li').each(function() {
$width += $(this).outerWidth();
});
// if modern browser
if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
}
//
else {
$(this).css('width' , $width*1.05+'px');
}
});
}
function getMobileMenu() {
/* build toggled dropdown menu list */
$('.rmm').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
}
else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.rmm-main-list').html();
var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";
$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
});
}
function adaptMenu() {
/* toggle menu on resize */
$('.rmm').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ( $(this).parent().width() < $width*1.05 ) {
$(this).children('.rmm-main-list').hide(0);
$(this).children('.rmm-toggled').show(0);
}
else {
$(this).children('.rmm-main-list').show(0);
$(this).children('.rmm-toggled').hide(0);
}
});
}
$(function() {
responsiveMobileMenu();
getMobileMenu();
adaptMenu();
/* slide down mobile menu on click */
$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
if ( $(this).is(".rmm-closed")) {
$(this).find('ul').stop().show(300);
$(this).removeClass("rmm-closed");
}
else {
$(this).find('ul').stop().hide(300);
$(this).addClass("rmm-closed");
}
});
});
/* hide mobile menu on resize */
$(window).resize(function() {
adaptMenu();
});
sorry it's a lot
I have a website: http://www.icontactlens.com.sg
When I click the navigation menu "About Us", it will display the sub-menu at both Chrome and Firefox. However, when I click at the IE (8,9,10 versions), it not working.
Here is the CSS code:
/* main navigation bar */
#navigation{
padding:0 0 30px 0;
}
/* first level menu item's font face */
#navigation > ul > li > a{
font-family: 'Oswald', arial, serif;
}
/* first level links */
#navigation, #navigation a{
color:#fff;
text-decoration:none;
font-size:14px;
line-height:100%;
display:block;
}
/* inacvtive - expandable items */
#navigation a.inactive{
background:url(../images/plusminus.png) right 3px no-repeat;
}
/* acvtive - expanded items */
#navigation a.active{
background:url(../images/plusminus.png) right -12px no-repeat;
}
/* current page items and hover states */
#navigation a:hover, #navigation ul li.current_page_item a, #navigation ul li.current-menu-ancestor a{
color:#9D9D9D;
}
/* current page items and hover states */
#navigation ul li.current_page_item a:hover, #navigation ul li.current-menu-ancestor a:hover{
color:#fff;
}
#navigation ul ul li.current-menu-item a{
color:#D0D0D0;
}
#navigation ul{
padding:1px 0 0 0;
display:block;
margin:0;
list-style:none !important;
}
/* First Level */
#navigation > ul{
background:url(../images/transparent-pixel.png) top repeat-x;
}
#navigation > ul > li{
background:url(../images/transparent-pixel.png) bottom repeat-x;
padding:10px 0 10px 0;
}
#navigation ul li{
display:block;
}
/* Sub Levels */
#navigation ul ul{
display:none;
margin:10px 0 0 0;
}
#navigation ul ul li{
margin:0 0 0 0;
padding:5px 0 5px 0;
}
#navigation ul ul li a{
font-size:12px;
color:#C4C4C4;
}
/* Third Level */
#navigation ul ul ul{
margin:10px 0 0 0;
background:url(../images/transparent-pixel.png) repeat-y;
}
#navigation ul ul ul li{
margin:0 0 0 10px;
}
Does I missing anything on the CSS stylesheet?
I have a bit of a problem and I am struggling to solve it for some time now.
Top menu is working... strange.
To see the problem go to: proba.dalipro.com.
JS for controlling menu:
var timeoutID;
jQuery(function(){
jQuery('.dropdown').mouseenter(function(){
jQuery('.sublinks').stop(false, true).hide();
window.clearTimeout(timeoutID);
var submenu = jQuery(this).parent().next();
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
left: jQuery(this).offset().left + 'px',
zIndex:100
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
jQuery(this).slideUp(300);
});
submenu.mouseenter(function(){
window.clearTimeout(timeoutID);
});
});
jQuery('.dropdown').mouseleave(function(){
// timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).hide();}, 250); // just hide
timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).slideUp(300);}, 250); // slide up
});
});
and css for menu:
/* CSS For Dropdown Menu Start */
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
}
#menu_top ul li
{
display:inline;
float:left;
}
#menu_top ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
border: 1px solid #560E00;
}
#menu_top ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
border: 1px solid #000000;
}
#menu_top ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
#menu_top ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
#menu_top ul li.sublinks
{
display:none;
position: relative;
}
/* CSS For Dropdown Menu End */
What I need to do to fix drop down function?
Take left out of the submenu css:
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
zIndex:100
});
Also, change #menu_top ul and #menu_top ul li in your style sheet to:
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
float: left
position: relative;
}
#menu_top ul li
{
}