I have been looking to develop a mobile-device website. I've been looking at the available mobile layout frameworks and am currently looking at jQuery Mobile.
Since there's no room to display the menu all the time, I was thinking I want a button on the left side of the title bar that opens a drop-down menu. Similar to the drop-down menu on the left of the Facebook header.
I was surprised to find no examples of a menu like this. Can anyone point me to some examples of this, or perhaps offer some tips?
That element is commonly called a Side Menu, and there are ample resources online for it
quick google search gave me these results, but there are plenty more, good luck.
http://purecss.io/layouts/side-menu/
http://www.berriart.com/sidr/
http://ionicframework.com/docs/api/directive/ionSideMenus/
Related
So I was tasked to do this: it's a timekeeping web application for employees of our company.
Thing is I don't know what that red part is called. Yes I have seen it in blogs and news sites where news gets slided up(or down). But I don't know what's it called so I can't look for sample codes of it.
So, I'm asking: what is it?
Do you means Coffin? http://fat.github.io/coffin/
Coffin is a UI component built on top of the Skeleton framework. It
aims to provide a simple, collapsible left shelf. Coffin is fully
responsive and automatically collapses in mobile views - allowing you
to swipe away and toggle a nagivation in and out of view. It behaves
similar to facebook/path's navigation UI.
A common problem I run into when building responsive websites is how to make a multi-level nav menu (3 or more levels) that works well for touch devices. I've seen a lot of plugins and techniques, but most of them fall flat because they don't allow a 2nd-level page to act as both a link to a page AND a parent of children in a sub-sub-menu. Some techniques address this by having an arrow icon that exposes the children menu items while clicking on the parent page name goes to the actual page... but on mobile devices these icons are usually very small targets and hence hard to use. Are there any other solutions to this problem (either jquery or javascript plugins, or straight-up CSS/JS code)?
I have a 'starting point' of sorts that I use for responsive web projects like this. I'm not sure if it's exactly what you need, but it allows for multi-level dropdown menus in desktop view. In mobile view, jQuery automatically creates an off-canvas menu.
Code:
https://github.com/kthornbloom/Responsive_Template
Demo:
http://rwd.kthornbloom.com/
Hope it helps!
Have you checked out any of the documentation surrounding touch-start events? I feel like you're going to get the best ux from this method. In your position, I'd be using tap to toggle classes onto your menu that would set the display to block (for example). Once your menu is open, you could then bind another touch event to the sub-level objects.
After our discussion in comments, it seems there isn't a straight forward way to get what you want due to the fact that we don't know what the user want after the submenu has been opened. There is no way for us to tell if they want to go to a link by clicking on the item again or collapse the submenu.
From this point, you have 2 options
Create a collapse once the menu is open and the user will know to use that to collapse the menu. If you think the size on most sites are small then make it bigger, however I don't think this will be an issue because it is so common.
Create a close button or something close to that for the entire menu. So when you click an item, it will expand, and if you click the same item again, it will go to the link. However there is collapsing the submenu until you click on the overall close button for the entire menu. This is only for tablets/phones as on desktop this should be a hover behaviour. This is similar to how the menu behaves on a tablet for http://www.lexus.ca. We actually have the menu closing if you click on the top most item again, you can see this behaviour on the phone or tablet. This is another option for you if the top level navs does not lead to pages.
Found a great write-up for a solution: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
Not sure if anyone can help me. But here's the issue. I'm making a mobile website for personal use and having a heck of a time with a free template I downloaded...
I'm wondering how I can put a title on a responsive menu of a website. When the site is visited on a desktop, a normal menu shows fine. However, when visiting on a mobile device or tablet, the site should automatically collapse the menu (which it does) and then show a single menu title that users can interact with.
Using google chrome I can inspect the element and find either a nav.php or bootstrap-responsive.css file that I can edit in order to add the menu title.
Can anyone provide any insight? I'm not sure what I need to post... The site is http://bit.ly/15TpCjW
Thanks! Let me know if I need to provide any other information!
Adding the class of brand below each icon set in your nav.php files (depending on the menu that you want to edit) will accomplish this.
any one can help in this?, i want to make a scroll bar to scroll the li underneath a div. in which i made a ui, scroller, but client want the front and back arrow to adjust the slides. like regular scroll bar like browser.
please visit ; http://ikeafamilylive.com/stories/60
and you will witness what i request. And please don't recommend me a plug-in, because i need to use this scroll bar across the site with several customization process.
please give me the sample code / suggestion to make a scroll bar using jquery+css. with full functionality.
If you want to use jquery and css the best way to go is going with a plugin like JScrollPane:
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
If you want to have several customization and looks you can easily do so with this kind of plugin:
Example (different looks on the same page)
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
Doing it by scratch will be a little more work, and you need good understanding of javascript and the framework you are going to use.
A plugin like JScrollPane will already have most of the functionality you will need, and if you need something that there isn't you can add the functionality using the basic plugin.
I'm currently teaching myself to create websites - this particular site is for a that business I have. I'm using Dreamweaver CS3 to do so.
I need some help with the horizontal navigation menu I am trying to create. I have three main categories within my website, each with their own small image to represent them. I want to have all three images, side by side underneath my company logo, acting as the navigational menu.
So for example, one section is Alcohol. When the user puts their mouse over the 'alcohol' image, a menu drops down underneath to show the subsections eg spirits, beer etc.
After doing some research, I can't quite decide the best way to do this. Whilst learning Dreamweaver, I have come across Spry Menus, which I thought would do the job. But I have also now learned about pop-up menus in Fireworks CS3 (which I also have available to me).
I'm really looking for some other opinions on the matter and would appreciate any recommendations about the best route to take with this.
Thanks.
I would prefer learning CSS menus instead of having it generated using Dreamweaver. You can try the this one.
I would learn pure CSS menus, and then for more advanced functionality, use jQuery plugins like Superfish
The site I first learned CSS menus from was CSSplay. This same guy also has a newer site aimed only at CSS menus.
I would say going though the source code of some of those will teach you a lot, but ultimately I would recommend using Superfish or some other jQuery plugin for more user-friendly menus, especially for delay on mouseout. A lack of mouseout delay can render most CSS menus completely unusable.
Give http://www.alistapart.com/ a try. Wonderful page with a lot of good tutorials. http://www.alistapart.com/articles/horizdropdowns/ for example shows you how to use a list and css to build a horizontal menu. Maybe a good starting point for you project.
Dreamweaver is really a good tool for getting fast results. But if you are interested in learning implementing websites than it is better to get your hands dirty. Take for example the tutorials from http://www.w3schools.com/ and a good editor of your choice and build your website or a fun project from the scratch. On the long run this investment will pay of.
First, don't use snippets built in dreamweaver. They are awful.
Use JavaScript, maybe even JS framework like jQuery. It offers toggle() function for that kind of situations.
In general, you should apply JS function to mouseover of your image. That function shows or hides div (your dropdown). You can achieve that by setting css parameter display: none (hidden) or display: block (visible).
Example for showing div:
My menu 1
<div id="menu-1">
<ul>
<li>Alcohol</li>
<li>Spirit</li>
</ul>
</div>
And some javascript:
function show(myid)
{
document.getElementById(myid).style.display = "block";
}
function hide(myid)
{
document.getElementById(myid).style.display = "none";
}
I made that in a hurry so it's not perfect.