There’s a reason for this, and before we move on to our CSS, let’s be aware of a couple things: If you’re wondering where to put this markup, let’s leave it right before the closing body tag for now. Let’s mark up our context menu like this: Here are the relevant parts of the CSS so far: Remember, the focus of this demo is on the creation of the context menus, so the icon action indicators and the add-task button aren’t going to work. I also pulled in the Roboto font family and, as mentioned above, I’ve included Font Awesome. If not, you’ll have to include these manually, or set up your task runners according to your development environment. If you’re working along in CodePen, you can easily include auto-prefixer and CSS reset in the settings pane. ![]() Remember, you can check out the CodePen demo to follow along with the full document structure. Here’s the important parts of the markup: Remember, the context menu provides one unique way to present a user with actions. Each task will also have an “actions” section, because we want actions to be as accessible as possible. I’ll make sure each task contains a data-id attribute, which in the real world would be generated from a database of some sort. I’ll pull in Font Awesome for a little extra visual pleasure, and I’ll think ahead a little bit. We’ll open up our HTML document as normal, throw in a header, a main content area, a dummy task list, and a footer. We’ll use this as a backdrop on which we can build up a menu, and possibly pass in some data to our actions. In our app, let’s imagine that launching the context menu by right-clicking on a task item allows us to view, edit, or delete this task. In Dropbox, those actions range from creating a new directory, to downloading or uploading files. Right-clicking and launching a context menu is a natural motion for users, and usually presents them with a list of actions. We’re accessing the same web apps on our laptops too though, so we can incorporate similar familiar gestures. For example, swiping left might prompt a user to delete or archive a task. With web apps being accessed by a variety of devices lately, we find ourselves implementing many gestures and actions to give them a more natural feeling. We can click on the task for more information, we can add new tasks, edit the task, and delete the task - a basic CRUD app if you will. On the landing page of our application, we’re likely to have a list of tasks that are yet to be completed. Yes, it’s a common example and you’re probably sick of hearing about task list applications, but let’s roll with it anyways because it always paints a clear picture. Imagine that we’re creating a good ol’ task list application. Painting the Picture - a Task List App Example Let’s start by creating a basic application structure so that we have something real world-ish to play with. It’s a bit of work, but we’re going to do it step by step. ![]() To deploy a customized context menu, we’ll need to prevent default behaviour, and then set up, trigger, and position our own menu. But how is it done? In a web browser, when a right-click action is performed, an event gets fired. Dropbox and Gmail are perfect examples of this, allowing you to perform actions like archiving, deleting, downloading, viewing, and so on. Web applications are starting to deploy their own customized context menus to present users with relevant actions. ![]() The interesting thing to note here is how the available menu actions change depending on the situation, or context, in which you launch the menu. These are all default behaviours, but they did get built from the application makers once upon a time. ![]() Right-clicking on an image presents its own set of options too - you can save an image, open it in a new tab, copy it, among others. You’ll be able to get page information, or view the source. When using a web browser, right-clicking on the page would launch that browser’s default context menu. From here, you can probably create a new folder, get some information, as well as other actions. On your computer, right-clicking on the desktop launches your OS’s native context menu.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |