How to remove these two inline style beside the .dropdwon menu, I tried the remove attribute [ jQuery('.dropdown-menu').removeAttr('style'); ] unfortunately it doesn't remove the inline style. Every time I hover the nav the inline style change to display block and when it hover out the inline style is set to display:none
<ul role="menu" class=" dropdown-menu" style="display: none;">
<ul role="menu" class=" dropdown-menu" style="display: block;">
Here's my code. I'm trying to remove this on size 767 or mediaquery max-width(767)
jQuery(window).resize(function() {
var width = jQuery(window).width();
if( width < 767 ) {
jQuery('.dropdown-menu').removeAttr("style");
}
});
jQuery(document).resize(function() {
var width = jQuery(document).width();
if( width < 767 ) {
jQuery('.dropdown-menu').removeAttr("style");
}
});
please see the two attached image for better visualization
When I hover the nav(About) the subpage show(ul.dropdown-menu) and the inline style will set to display block
When I hover out the nav(About) the subpage (ul.dropdown-menu) inline style will set to display none
Please help me get rid these two inline style the style="display:none"; and style="display:block";
Try with show()
jQuery('.dropdown-menu').show()
or css()
jQuery('.dropdown-menu').css('display','block')
Drag the output window of the fiddle .They will show the menu on resize
Demo Fiddle
There is a JavaScript somewhere that is adding those styles. I guess you are using some framework or template you found in the Internet. Now you either have to remove the not-needed code that adds the styles (recommended!) or bind over it to be removed each time, something like what you have written but in different event:
jQuery('.dropdown-menu').hover(function() {
jQuery('.dropdown-menu').removeAttr("style");
}, function() {
jQuery('.dropdown-menu').removeAttr("style");
});
Ensuring this is after the piece of code that does the style adding at first place.
Or you can try totally removing the behaviour for the menu and write your own:
jQuery('.dropdown-menu').unbind();
Try to append at the end of your main css file a rule-set declaration on .dropdown-menu selector with the property display:none for media-query < 767:
#media screen and (max-width: 766px) {
.dropdown-menu {
display:none;
}
}
You can use click instead of hover for mobile, and display: none; by default, set in CSS. Then add a media queries for PC (here > 767px) to force display: block;. The good thing is that you limit the use of JS.
This is a working example of what can be done.
EDIT
I updated the snippet with an example which is, I think, closer to your code.
$('.menu-item').click(function() {
$(this).toggleClass("active");
});
.menu-item .dropdown-menu {
display: none;
}
.menu-item.active .dropdown-menu {
display: block !important;
}
#media only screen and (min-width: 767px) {
.menu-item .dropdown-menu {
display: block !important;
}
}
<ul role="menu" class="menu">
<li class="menu-item">Menu 1</li>
<li class="menu-item">
Menu 2
<ul role="menu" class="dropdown-menu" style="display: none;">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
i have html menu with submenu for ex:
<li id="item-3" class="menu-item has-children-3">
<span>Auto</span>
<ul class="sub-menu fadeOut animated fast" id="cpx" style="">
<li id="menu-item-9" class="menu-item"><span>Reno яхту</span></li>
<li id="menu-item-6" class="menu-item"><span>Audi</span></li>
</ul>
</li>
When i make mouseover on menu Auto, i need to replace for ul fadeOut to fadeIn and add to style="display:block" and after mouseout add to style="display:none" and to class add fadeOut to ul element?
You can try to achieve this only with css and element+element selector
https://www.w3schools.com/cssref/sel_element_pluss.asp
eg:
.sf-with-ul:hover + .sub-menu {
display: block;
opacity: 1;
}
however this might not be the effect you want as the moment you mouse out of anchor element with class sf-with-ul trying to click on some of the sub menu items the whole sub menu will go back to "display:none; state"
maybe better apply this to the whole parent li like
.menu-item.has-children-3:hover .sub-menu {
display: block;
opacity: 1;
}
I have a program that automatically generates a tree. It looks like
<li class="linamesystem">Alternator</li>
<ul class="boxfornamegroupsparts">
<li class="linamegroup">Alternator2</li>
<li class="linamegroup">Krmilnik alternatorja (regler)</li>
</ul>
Alternator -> Alternator2
->Krmilnik
What would be the css code for hovering Alternator parent and showing linamegroup childs?
Or should I do it with javascript?
This could be CSS rules to use:
.boxfornamegroupsparts {
display: none;
}
.linamesystem:hover + .boxfornamegroupsparts {
display: block;
}
EDIT: as pointed by Paulie_D, this is invalid HTML markup, ul cannot/shouldn't be direct child of other ul element.
Probably this is just a piece of code that you have. The real one should be something like this:
<ul>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Anyway to achieve what you wanna do, just use this css:
.linamesystem:hover .boxfornamegroupsparts {
display:block;
}
I have created a similar jsfiddle for you, illustrating a horizontal menu with submenus. The trick is to initially hide linamegroup and display it when linamesystem is hovered.
.linamegroup { display: none;}
.linamesystem:hover .linamegroup { display: block; }
I'm creating a responsive site. I have a media query set up so that when the screen width drops below 768 px a class (lets call it "hiddenClass") is hidden. Then I implement Javascript to toggle this class into view on a button click. The problem I'm running into is that javascript seems to override the media query. So if I shrink the screen below 768px the "hiddenClass" disappears....then I click the button which displays the "hiddenClass".....then click the button once more to hide it on the smaller device again.....now I expand the window and the "hiddenClass" stays hidden even after it gets to the 768px. If I take out the javascript and shrink the window the "hiddenClass" performs like it should...which tells me javascript is overriding it.
Is there a CSS fix to this? I know I could always check for a window resize event in javascript to display the hiddenClass after it reaches 768px. Was just wondering if this can be handled with CSS....or if javascript is the way to fix it.
Update JSfiddle with JS commented out so you can see how it should work...then add in the JS to see the issue described above. The button is the 'menu' navigation element when you shrink the screen down and "hiddenClass" would be the "menu" class in the li's:
http://jsfiddle.net/or5vy17L/1/
HTML:
<ul>
<li class="menuButton">- Menu -</li>
<a href="index.html">
<li class="menu" >
Home
</li>
</a>
<a href="instagram.html">
<li class="menu" >
Instagram
</li>
</a>
<li class="menu">Clients</li>
<li class="menu">Nutrition</li>
<li class="menu">About Me</li>
<li class="menu">Contact</li>
</ul>
css:
li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}
ul {
text-align:center;
}
.menuButton {
display:none;
}
#media (max-width:768px) {
ul {
padding:0px;
}
li {
display:list-item;
border:1px solid white;
padding:.2em .2em .2em .2em;
border-radius:0px;
}
.menu {
display:none;
}
.menuButton {
display:list-item;
}
}
javascript:
/****
$('ul').on('click', '.menuButton', function() {
$('.menu').slideToggle();
});
****/
The .hiddenclass is staying hidden because it is a inline style, and inline styles override nearly all other styles. You have two options, one is to override the inline style with a CSS, as described in this CSS Tricks post:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
div[style] {
background: yellow !important;
}
JSFiddle Demo
According to this article, this CSS solution works in:
Internet Explorer 8.0
Mozilla Firefox 2 and 3
Opera 9
Apple Safari, and
Google Chrome
Or, use JS or JQuery to remove the inline style when the screen is resized:
$(window).resize(function(){
if($(this).width() >= 768){
$('.hiddenclass').show();
}
else{
$('.hiddenclass').hide();
}
});
JSFiddle Demo
I seem to have come across this issue myself and following the advice here, I've come up with this solution:
window.onresize = function() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
if(window.innerWidth >= 1024) menu.style.display = '';
};
function toggleMenu() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
var link = document.getElementById('nav').getElementsByTagName('a')[0];
if(menu.style.display == 'block') {
menu.style.display = 'none';
link.innerHTML = '▼';
}else{
menu.style.display = 'block';
link.innerHTML = '▲';
}
}
Explanation:
The toggleMenu() function controls the display/hiding of the menu, and the issue presented itself after resizing the window from < 1024px (drop-down style menu) to > 1024px, my normal "desktop" menu disappeared completely. Given that JavaScript inserts styles inline (i.e. as a element attribute, ) then on a resize of 1024 or higher, this inline style should be gone.
Problem fixed.
I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <li> elements , so that they don't exceed one line.
The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .
The plugins that I've tried have not been useful to me .
My code looks like this:
<div class="row">
<div class="col-md-12 column">
<ul class="nav nav-pills center-pills text-center">
<li class="active">
<a href="#">
<span class="text-center badge pull-right span-list">1</span>
1 Mars
</a>
</li>
<li class="">2 Mars</li>
<li class="">3 Mars</li>
<li class="">4 Mars</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
</ul>
</div>
</div>
The code fiddle .
Your suggestions will be very welcome .
Are you having a problem with styling? If so...
I've set the row height to fixed, and made overflow hidden, so that you get just one row of buttons.
.row{overflow:hidden;height:42px;}
I've added a prev and next button, and made them float left and right respectively. I hope this doesn't violate your pagination framework. Please let me know if you want an example of how to programmatically add these elements.
HTML
<li class="next">Next</li>
<li class="prev">Previous</li>
CSS
li.next{float:right;}
li.prev{float:left;}
I believe this gives the desired result... please let me know if I've missed your intention.
Disclaimer: I've only tested this in Opera 19.0. I don't have access to Firefox/Chrome/IE at the moment.
Example: http://jsfiddle.net/nickg1/5ELfQ/2/
Updated: Updated to remove horizontal scrollbar. - http://jsfiddle.net/nickg1/5ELfQ/3/
I have had success with Bootstrap pagination. If you are generating too many elements to fit in your desired space, you need to either figure out a way to generate less or use css to limit the size of your pagination space and "cut off" the overflowing elements.
What you can do is .prepend() a left li and .append() a right li:
$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});
Although there has little browser compatibility and styling issues in this solution. But I hope this will give you an idea to start.
My CSS:
.nav.nav-pills {
width:auto;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
position: relative;
padding-right: 38px;
display: inline-block;
}
.nav-pills > li {
display: inline-block !important;
float: none !important;
}
.nav-pills > li.last {
position: absolute;
right: 0;
}
As display:inline; is applied to .nav, so for centering use text-center class in wrapping div. i.e.
<div class="col-md-12 column text-center">
Apply jQuery for previous/next buttons and resizing issues.
$(document).ready(function () {
$('.nav').prepend('<li>«</li>');
$('.nav').append('<li class="last">»</li>');
var ulWidth = $('.nav').width();
var screenWidth = document.body.clientWidth;
if (screenWidth < ulWidth ){
$('.nav').css('width', '100%');
}
$(window).resize(function(){
screenWidth = document.body.clientWidth;
screenWidth < ulWidth == true ?
$('.nav').css('width', '100%') :
$('.nav').css('width', 'auto');
});
});
In my MVC Razor layout view I am trying to set the background color of my dropdown list on mouse hover:
The list looks like this:
<li class="dropdown">
Partner <b class="caret"></b>
<ul class="dropdown-menu" style="background-color:#080808">
<li class="marv-main-li">#Html.ActionLink("Test1", "Action1", "Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test2","Action2","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test3","Action3","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test4","Action4","Partner")</li>
</ul>
</li>}
I tried this css which didnt work:
.dropdown .dropdown-menu .li a:hover {
background-color: #06fa12;
}
How can I change the background color of the text in the dropdown list on mouse hover event?
I am using Twitter bootsrtap 3
Since <li> is not a class, you should remove the dot before the li in your stylesheet.
Something like this
.dropdown .dropdown-menu li a:hover {
background-color: #06fa12;
}
It is impossible to change a parent element by hovering on a child element. Here is a javascript solution with jQuery.
http://jsbin.com/uWupAtE/1/
$(function() {
var ul = $('.Parent'),
li = $('.Child');
li.mouseover(function() {
ul.addClass('hovered');
});
li.mouseout(function() {
ul.removeClass('hovered');
});
});