i want to create a collapsible menu or even better a spry menu using just css/HTML. I want to use it on eBay but javascript/jquery is not allowed. I have seen it on other peoples eBay.
A spry menu would be best but this is probably not possible without javascript
If you are looking for Pure CSS based menu then
try this fiddle http://jsfiddle.net/gajjuthechamp/xYFmh/
Source: http://purecssmenu.com/
You may have a look at 100 Great CSS Menu Tutorials
Related
to be clear, I want to add a hamburger menu in an HTML web app that will open a menu screen when clicked. I want the menu to animate from the corner of the screen (where the menu button is located). I would like to accomplish this using HTML, CSS, or javascript because those are the languages I'm currently studying. If someone could recommend a beginner-friendly method to accomplish the above-stated goal, I would be extremely grateful. Thank you for your time.
To add on to #Paul's answer - definitely use Bootstrap, and if you are going to use Bootstrap, don't forget to link the Bootstrap library to your HTML file in your header and reference jquery and javascript near the end of your code. More complete instructions can be found here: http://getbootstrap.com/docs/4.0/getting-started/introduction/
If you are looking for an easy way to do it, I would reccomend Bootstrap as it is a great resource and CSS framework for creating lots of components. I suggest looking at its dropdowns library for creating a hamburger menu.
Cheers.
I have to reproduce menu of the winston.com website. It also has to work with wordpress, and I found the UberMenu but its sort of a personal project and I don`t want to spent money on plugins.
The website is built on bootstrap, and i found the next plugin: yamm 3 ( website ), but I simply cannot reproduce the menu from winston.com.
I also want it to be built on bootstrap, so if someone could help me make a reproduction with that YAMM3 plugin, it would be great!
Its pretty basic, you should start with an on hover event. With this event just "show" the menu which is hidden at first. On this menu add a transaction effect http://api.jquery.com/category/effects/
Start of with a simple div that has the correct position after your menu items. Then try to implement a jquery/javascript function to show/hide the correct menu item. After that add a transaction effect. Keep it simple first, aka use some basic colors and widths to understand how this dropdown menu works. After that, just extend/improve it to make it look like your example.
I'm talking about the button that appears below certain screen widths which hides/unhides the menu when clicked (screenshot below). I'm trying to replicate its behavior on my website without resorting to using bootstrap (because I like to work without frameworks).
I've looked at the source code, but can't figure out exactly how it works, and what the most efficient way is to replicate the behaviour. From what I can tell it works with javascript by applying a hide/unhide class to the menu, activated by the button.
Would it be possible to replicate this with the css checkbox hack? Or is using javascript better?
This is fairly simple:
Add the hamburger menu icon
Have a CSS class that makes the nav area active
Make JS add/remove that class from the nav area
Use CSS transitions to take care of the animation (they're more likely to be accelerated on a mobile device)
I like the implementation on http://purecss.io.
Also check out http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html
edit:
I misread question the first time.
I think you'd have a better time using javascript.
If you are using jquery you could use the toggle method.
$("#hide-show-button").click(function(){
$(".nav").toggle();
});
I'm working on this site http://fridasofia.se/wand/ and have used JavaScript to mark the current menu item with an arrow.
The problem is that if you use the scrollbar to scroll the page, instead of clicking the menu, the arrow that marks current menu item doesn't follow. How do I make it work?
Thanks /Frida
Such plugins called ScrollSpy. Here is most popular
Bootstrap
jquery-scrollspy
I recommend looking at the jQuery Waypoint plugin http://imakewebthings.com/jquery-waypoints/
It should have what you need.
How do I incorporate the following sidebar menu feature using jQuery where the menu on the left re-appears as the user scrolls down the page?
Here's an example sidebar menu.
There's a really good tutorial over at Nettuts about this exact thing:
Creating a Floating HTML Menu Using jQuery and CSS
Jquery CSS Control:
http://css-tricks.com/scrollfollow-sidebar/
and tutorial is also nice,
if you are using bootstrap then you can use affix control of bootstrap, that is also good