Below is the link for the code demo
Fiddle here
There are 2 questions
Click on the links of the first accordion I(Link1 | Link 2 | Link 3), why is that acting weird
And the sub-child div in the 1st accordion content is not visible in the output. (<div>This div is not visible in the output</div>)
Thanks in advance.
Write like this:
$('.accordion > li > a').click(function(){
$(this).next().slideToggle("fast");
$(this).closest('li').toggleClass('active');
});
Define class name to the DIV instead of .accordion div{display:none}. Write like this:
.accordion .extended{display:none;}
Check this http://jsfiddle.net/zkZN6/2/
the reason is that you defined $('.accordion a').click(function(){ in your javascript which affects all tags under the class name called "accordion". you need to define another classname just specific for the "accr1,accr2,accr3...etc" and define another javascript for them.
Well as Tugkan said all the links are affected by $('.accordion a').click(function(){ that's why it is behaving strange and as far as the division is concerned the property display none is applied to it see in the inspect element.
Do something like this to make division appear :
Demo
style="display:block;"
Related
I have been working on this for quite a while, and cannot seem to find why my dropdown menu is not working. After searching many online forums and asking friends, I have no answer. I just want the dropdown to work. I cannot seem to make the .dropdown_trigger class make the .dropdown class hide, or reappear. Any help would be very much appreciated. Linked below are the pages.
Thanks,
Alex
Index Page CSS File
By inspecting the html page provided in the "Index Page" link, there is only one element with the "dropdown" class, and it's empty. It's not clear what your code is trying to show or hide.
<div class="dropdown"></div>
The "dropdown_trigger" class is located in a table header element:
<th>
PROJECTS
</th>
By inspection, there does not appear to be any javascript to trigger any behavior. It does not show up in Source in the Chrome Inspector. Normally, this would be done with JS to use .show() or .hide(), for example if you had jQuery (there are other ways). Or are you trying to create this without JS at all? Are you trying to create dropdown menus with only CSS?
If so, please check this tutorial out:
https://css-tricks.com/solved-with-css-dropdown-menus/
The key part is here:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
By creating a CSS rule to change the visibility, the dropdown menu can be shown. However, there does not appear to be any HTML content to show in the current linked page you provided. That div is empty.
How do I specifically assign a style to a child (the top black header from the image)
I've tried something like
.noo-topbar > .container > a
and
.noo-topbar .container a
but nothing's changed...
view from Google Chrome
try this
.noo-topbar .container > ul li a
Read about css combinators:
http://www.w3schools.com/css/css_combinators.asp
if you still have trouble i'd suggest applying an id to it, like #specialElement, and styling it directly.
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)
If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>
You can change your css to generate a nice submenu
nav ul>li>ul {
display: none;
margin-left:2em;
}
See the example on http://jsfiddle.net/WrcMX/
I think this is what you wanted
alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
alllinks.hide(); //First hide all the links
e.preventDefault();
if ($(this).parent().children('ul').size() > 0) {
$(this).parent().children('ul').toggle();
}
});
I gave up. I'm a pretty worse inquirer :)
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.
http://jsfiddle.net/UyrdS/6/
But it's not dynamic. It has a static width. That is still the problem.
Im trying to create a better way of letting the user know what page they are on by telling my global navigation to stay one colour. What I mean is if the user is on the home page I want the word "Home" to stay blue for example so that they know thats the page they are currently looking at.
Im not sure if i've explained it very well but if you take a look at the jsfiddle bellow it'll make more sense.
http://jsfiddle.net/4kUp3/
If you don't want to just hard code the style into each page to highlight the item, you could use jquery to grab the element that links to the current page and change it's style
$('a[href="'+window.location.href+'"]').parent().addClass('selected_link');
You could compare each link in the menu with the current page URL. With jQuery:
$('#site_nav li a').each(function(){
if($(this).attr('href') === window.location.href) {
$(this).parent().addClass('selected_link'); // apply style to li
}
});
DEMO
You have it setup correctly, the order on your CSS is just messed up a bit.
Change
.selected_link li a:link
to
.selected_link a:link
and HOME will be blue.