<div class="hamburger">
hamburger
</div>
Hey guys I'm trying to create a hamburger menu like the menu in this link that I provided. i have nothing only html. And I don't know hoe create this? You guys can help me I think. Did you find anything like this? Or can you tell me how to do this?
https://www.hugeinc.com/us
Basically, you'll have 2 elements there - the button ('H' on the link you provided), and the navigation - list of links, that is hidden by default. Clicking on the 'H' button would show the navigation menu (and change text from H to Huge, or whatever you want).
<style>
.hidden {
display:none;
}
</style>
<div class="hamburger">
H
</div>
<div class="navigation hidden">
Link 1
Link 2
Link 3
</div>
<script>
$('.hamburger').click(function(){
$('.navigation').toggleClass('hidden');
$(this).text()==='H'?$(this).text('Huge'):$(this).text('H');
});
</script>
That's the basic idea how it would work. You can adjust it to your needs and style it how you want it to look.
(I haven't tested it, so it may contain some syntax errors - but the idea stands).
Related
Having trouble with bootstraps collapse. I have 2 menu items, with a dropdown collapse. I'm trying to alternate/switch them so I DONT get to see both at the same time. I've tried using 'toggle:false' but that does't seem to be working with bootstrap.
Please see the codepen for a working demonstration. Currently am using data- tags to create the functionality.
I'm wondering whether the DOM treats the collapse functionality as 2 separate things and therefore doesn't correlate them together.
So I have
<div class="search-bar>...</div>
<div class="collapse" id="collapseExample">...</div>
<div class="collapse" id="collapseFilter">...</div>
Inside the search bar I have 2 anchor elements which trigger the collapse. And then a non-related drop-down.
<a id="search-button" data-toggle="collapse" href="#collapseExample">
<span class="icon-search"></span>Search
</a> <!--Simplified -->
So I'm not sure why BOTH dropdown collapse elements come down. I want it to work just like the accordion style
Thanks in advance.
You can force hiding other menu like this:
$("#search-button").click(function() {
$('#collapseFilter').collapse('hide');
});
$("#filter-button").click(function() {
$('#collapseExample').collapse('hide');
});
See JsFiddle of your demonstration. I hope it helps, Thanks
I am working on a wordpress page and i want to set a fixed image and 3 different texts at the the bottom of it.
What I want to do is that when the mouse hover on Text1 the top image changes, when the mouse hover Text2 the top images changes again.
Example: http://fr.muaythaitv.com/pages/helpcenter/advertise.php
I searched on internet but couldn't really find what I'm looking for, hope someone can help me!
You mean something like this ?
HTML markup.
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
jQuery :
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href'));
});
Css at your will ..
See Here again - it´s the second example is a live link, the third is anchor disabled link.
I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter
I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.
My website's mobile site, (http://www.codesrce.com/thedrumcenter) has a very modern and functioning push menu. However, I am looking to make it more user friendly. Can someone please help me tweak my code so that when the user presses on the menu button the menu will open, and also when the user slides the screen to the right to open it, and then once it's open then they slide to the left to close it? Also, when the button is pressed, I would like it to turn to this color, #0099FF, and then when it is closed turn back to gray. Sorry if my wording isn't the best, but I hope you know what I mean. :) I will provide my code so far:
HTML
<div id="Mobile">
<div id="menu">
<ul>
<li>Top Brands</li>
<li>Drums</li>
<li>Hardware</li>
<li>Cymbals</li>
<li>Sticks</li>
<li>Drum Heads</li>
<li>Terms of Use</li>
<li>Affiliations</li>
</ul>
</div>
<div id="right">
<div id="Top">
<div id="menubar">
<a id="menubarheader">DrumCenter</a>
</div>
</div>
</div>
</div>
JQuery
$('#button').toggle(
function() {
$('#right').animate({ left: 275}, 'fast', function() {
$('#button');
});
},
function() {
$('#right').animate({ left: 0 }, 'fast', function() {
$('#button');
});
}
);
Any help would be appreciated, as I am a complete NOOB at Javascript and JQuery. Thank you!
Essentially there are different ways to go about this.. I inspected the CSS on your site to see how you were doing things but with 8 CSS's I gave up... too much to look at in the browser.
So.. essentially this question I believe was asked in
Swipe in the middle to open panel with jQuery Mobile?
and he gave a fiddle such http://fiddle.jshell.net/Palestinian/2B4Ht/
So I would implement that into your coding in some way. Have a top-fixed navbar that when collapsed will show your "push menu". Then just have the options if the the screen width is less than say 768pixels or something you can swipe left or right to open the pannels that will be menu's themselves..
Just my advice. I have never made a menu like the one you asked but I don't think it will be difficult.
So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }