I'm looking to understand how to code drop down navigation bar similar to the reference site included below. Their solution works perfectly between pc/mac/iphone and android and it would be awesome if someone can show me the same. If you are looking at this site via your pc or mac adjust the size of the browser to activate the drop down version of the navigation. Thanks alot!
http://treadsack.com/
p.s Im new to asking these questions online so if you need me to be more specific please comment and I will comment back.
Thanks again!
Just use bootstrap, http://getbootstrap.com Its allready cross browser compliant, and uses that type of menu
There are a number of ways to show the dropdown like that, assuming that's what you're asking. In this case, observe what they've done using the browser's tools.
In Chrome:
Minimize the browser, so you can see the dropdown style of the page.
Click on the "NAV" link to see the dropdown menu.
Right-click on any of those menu items, and click Inspect Element.
You'll see the Developer Tools open up below, showing the HTML. You'll notice that the element that you wanted to inspect, is a <a> inside <li> inside <ul> inside a <div> of class dropdown
4.1 When the Nav is closed, this div is as below:
<div class="dropdown" id="nav-dropdown" style="display: none;">
<!-- bunch of ul, li elements follow here -->
</div>
Now click on the Nav link, and observe the change in HTML of that div alone. You'll notice it as below:
<div class="dropdown" id="nav-dropdown" style="display: block;">
<!-- bunch of ul, li elements follow here -->
</div>
They just changed the display property of the div, from none to block materializing all those menu items.
And that can be done using jquery as below:
$( "#nav-trigger" ).click(function() {
$('#dropdown').css("display", "block");
});
nav-trigger is the id of the NAV element.
Update:
The HTML is structured like this:
<div class="main-container">
<span class="navigation" id="nav-trigger"/>
<div class="dropdown" display="none">
<!-- menu items as <ul><li> here -->
</div>
</div>
That's the main structure (names changed). Initially, only the <span> element is visible. When this span element is clicked, the div below it is displayed. So we associate a click handler to the span element in jQuery, as I've shown above. That's how they are "connected"
The animation:
Again, there are a lot of ways to do that. There are jQuery plugins that you can directly use in your project (easiest). Alternatively, you can use jQuery.slideDown() and jQuery.slideUp() to toggle the menu items down or up. Links: slideUp() and slideDown()
You'll notice that there is a sequence to the animation. Not all menu items are dropped down at once.
$( "#nav-trigger" ).click(function() {
var menuitems = $("#dropdown").children(); //since the items are hierarchically , children of the dropdown div.
for(var i=0; i<6; i++){
menuitems.eq(i).slideDown(200); //200 is the speed.
}
});
That's a very crude code, but it gives you the picture. Hope that helps.
Basically, You can make sites mobile friendly by using percentages instead of set widths and heights... Typically developers will make separate styling sheets depending on device resolution... so at different resolutions content will scale accordingly.
see this example
This way you can control different styling so it displays correctly
Related
Im using materializecss collapsible and trying to get an jump link to open an accordion panel and scroll to that link. I have the scrolling working, but I cant seem to get only the panel with id of the link target to open. Right now I just have the click opening all the accordion panels with css.
$('.open_accordion[data-accordion]').on('click', function () {
let target = $(this).attr("href");
$(".collapsible-body").css("display", "block")
})
https://jsfiddle.net/f638pmk1/
I tried adding the active class to the li tag and the div tag with the collapsible-body class but it still doesnt open that section. I think I have the target in the variable, but not sure how to use it. Im down to using a pure JS way. Appreciate the help.
Ok, this is pretty straightforward but I had to change a couple of things and also rebuild in Codepen (which I find much easier).
1) You need to add the ID to the collapsible header of the panel you are targeting and a class of scrollspy:
<li class="x-accordion-group">
<div id="lee-open" class="collapsible-header scrollspy" id="linked">Second</div>
<div class="collapsible-body x-accordion-toggle">
...
If you wanted to open a collapsible normally, you'd click the header - that's how they work.
2) Initialize scrollspy. Scrollspy is smooth scrolling in materializecss, you add matching ID and class of .scrollspy to the target div:
$('.scrollspy').scrollSpy();
3) Force a click on the target element (the header of the collapsible):
$(target).trigger('click');
No need to add any css to the collapsible at all. Note, I added a class of active to the first collapsible (on the li), just to give us some space so actually scroll through.
https://codepen.io/doughballs/pen/ZEGLNvL
I am working on a HTML website. In Website menus are working properly on desktop screen. But In mobile version Parent menus are opening properly as a dropdown. but when I trying to open sub menus it is not opening. If I click on icon , it is redirecting to a page which is linked to parent menu.
I just want to open sub menu dropdown when I click on a icon. But Parent menu link should be there.
I am very new to javascript. Please help me to solve my problem.
Here is my html code
<nav class="navigation">
<ul>
<li> HOME
</li>
<li> <span>WHO WE ARE </span>
<i class="ion-ios-plus-empty visible-xs"></i>
<ul class="sub-nav">
<li>
Vision
</li>
</ul>
</li>
</ul>
</nav>
and hrere is my js
$('.sub-menu >a').on('click', function() {
if ($(window).width() <= 767) {
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
}
});
please help
Your code is very messy, so first I'll answer the question generally: If you want an event to occur when clicking a link without the link actually opening, you must stop the event from firing. There are 3 ways to do that (I included a link in the bottom of my answer regarding which does what), here I chose e.preventDefault():
document.getElementById("myspeciallink").addEventListener("click", function(e) {
alert("A different action!");
e.preventDefault(); //return false / stopPropagation could've also worked here
});
I'm a link!
Regarding your code:
You're trying to bind an event to sub-menu, which doesn't exist in your code.
The sub-menu > a selector only applies to direct children, so for your selector and the following example code only example B would apply to the selector. Perhaps sub-menu a would be better suited here:
$(".sub-menu > a").click(() => alert("Clicked"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
<li>
Example A
</li>
</ul>
<br/>
<ul class="sub-menu">
Example B (Which is what you did but not what you want)
</ul>
Animations based on screen size (a.k.a Responsive Web Design) shouldn't be done like this unless you don't have a choice, and you do. It is preferred you use CSS to achieve what you're trying to accomplish with transistions. I recommend reading more on this subject.
I highly recommend learning CSS, JS and HTML better in order to have a better understanding of what's going on and of good & bad practices.
See also:
What's the difference between event.stopPropagation and event.preventDefault?
Couple of things here.
First of all you apply jQuery code for element $('.sub-menu >a') which means that it will applay to all a elements which are direct children of .sub-menu element.
But you don't have element wih class .sub-menu. You should add it to direct parent of an a element to which it should be applied.
Secondly, if you don't want the a tag to redirect you, then you shiuld add event.preventDeault() where event is an event variable which you can get in .on() function like this $('.sub-menu >a').on('click', function(event) {...
Lastly, this code
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
works that way that firstly it hides all dropdowns and then opens teh one you clicked. If it is desired behavior, then ignore this. But I don't think it is.
Why? Because right now when you click on visible dropdown a tag (the one that opens it) you would expect the dropdown to hide. And in your case it will hide and show again. But if you want it to work that way, then no problem. The code is correct.
I am working at the moment on my personal website and I have the following issue:
On my website I would like to use a collapsible "main menu" which should acts like the default Bootstrap Accordion. My main navigation menu is an unsorted list, which can collapse. Each <li> element has the data-toggle="collapse" attribute and the nested <div> the collapse class. This works fine.
The problem is, that the menu points does not get closed when another menu point is opened. Because of the HTML structure, which I have for design reasons and some other features I need, I am not able to use the Bootstrap default Accordion feature.
In another part on the website I am successfully using already the Accordion feature. There I can have the necessary HTML structure for the Bootstrap Accordion which looks like this (example code from this specific part on my webpage):
<div id="cases-list-elements-group" class="**panel-group**">
<li class="**panel** li-main-style ul-style">
<a class="nav-scroll list-case-style" href="#case-details-1"
data-toggle="collapse" **data-parent="#cases-list-elements-group"**>
Case 1 Details </a>
<div id="case-details-1" class="collapse case-details">
<div class="container container-cases">
The example from above works. So I know how to use the default Accordion from Bootstrap. My problem is, as explained before, I can not have this HTML structure for my main menu:
panel-group
panel
data-parent="#id-of-the-panel-group"
So I need a workaround, to close the already opened menu point, after another is expanded. I have searched for hours and found some JavaScript (jQuery) examples which should close the already opened element. Unfortunately no one of the examples I have found helped me to solve my problem. They were not detailed enough for me to understand the logic behind or didn't work at all (yes, didn't worked as well in the provided JS Fiddle examples)
I know I need to do this with some custom JavaScript. After hours of trying I thought, probably someone here can advise.
I know you searched for answers and found some jQuery examples, but have you tried it this way?
Basically what I've done is just hidden a list in each list item. If you intend to make the accordion list items links as well, just add an href tag around them. I'm sure this code could be shortened but here's the jQuery half of it:
$('#first').hide();
$('#second').hide();
$('#third').hide();
$('#fourth').hide();
$('#colours').click(function(){
$('#first').slideToggle();
$('#second:visible').toggle();
$('#third:visible').toggle();
$('#fourth:visible').toggle();
})
$('#shapes').click(function(){
$('#second').slideToggle();
$('#first:visible').toggle();
$('#third:visible').toggle();
$('#fourth:visible').toggle();
})
$('#fruit').click(function(){
$('#third').slideToggle();
$('#first:visible').toggle();
$('#second:visible').toggle();
$('#fourth:visible').toggle();
})
$('#vehicles').click(function(){
$('#fourth').slideToggle();
$('#first:visible').toggle();
$('#second:visible').toggle();
$('#third:visible').toggle();
})
And here's the full thing JSFIDDLE
I'm implementing a user notification system. When the page is loaded an AJAX request is made and if notifications exist, they are rendered into a <ul> which is hidden but should show up if the notification item is clicked.
I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.
The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.
// this is in the top bar
<a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert">Benachrichtigungen</a>
// and this appended to the end of body
<ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;">
<li class="event_new">[..]</li>
<li class="event_new">[..]</li>
</ul>
I also initialize the dropdown() when i append set the data-toggle attribute. Like this:
$notifications.addAttr('data.toggle', 'notifications-alert')
.dropdown();
I also tried with a manual trigger but still doesent work.
$notifications.addAttr('data.toggle', 'notifications-alert')
.click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
.dropdown();
Any ideas why it is not working?
#EDIT: my mistake, solved. See my answer for details.
All examples in twitter bootstrap shows both the link [tag a] and the dropdown [tag ul] together with the same parent. Maybe the easy solution is that you should add the ul after the a instead of adding the ul in the end of the body $('a selector').after(ul)
I know the show/hide thing has been covered to death on stack, but I just can't find a solution that works for me, sorry. I've tried several JS/jQuery solutions that I found and can't quite get one to behave the way I'd like.
I have many divs that are very similar in content (content changes slightly based on version selected), and all have the exact same style.
Desired behavior
I'd like one div to show by default with all others hidden. Then, based on a link click, a different version div is displayed and all other content divs are hidden.
Basic HTML
<div class="container">
<h1>Header</h1>
<p>Basic info about page</p>
<ul>
<li>Version 1</li>
<li>Version 2</li>
// More links to other divs
</ul>
<div class="content" id="ver1"> // I'd like this div to be the default
Content here // when the page loads. All other divs
</div> // are hidden until a link is clicked.
<div class="content" id="ver2">
Content here
</div>
// More content divs
</div>
I'll have up to a dozen different versions of these content divs.
JS or jQuery is fine, but jQuery is preferred because I'll probably add some kind of show/hide effect. I don't care that greatly about the naming structure of the divs or links.
$("div.containter ul li").each(function(){
$(this).onclick(function(){
$("div.content").hide();
$("div" + $(this).attr("href")).show();
});
});
Wrap that in a $(document).ready or whereever and you should be good to go my friend. Learn the code, so that in the future, you are gosu.
How about adding some more RESTful behaviour.
$(function(){
// get the location hash
var hash = window.location.hash;
// hide all
$('div.content').hide();
if(hash){
// show the div if hash exist
$(hash).show();
}else{
// show default
$("#ver1").show();
}
$("div.containter ul li a").click(function(){
// hide all
$('div.content').hide();
$($(this).attr("href")).show();
});
});
I suggest you to use on() jquery function with selector. And also you can show the default div using css. Here is the complete code.