Tag: Menu

Icon Usability: When and How to Evaluate Digital Icons

Summary:  Effective icons depend on recognizability and interpretation. Evaluate them with methods appropriate for your specific research questions Icon Usability Effective icons can increase usability by helping users understand and interpret available functionality. However, when poorly implemented, they harm usability and introduce confusion. In Digital Icons That Work, I emphasize the importance of two variables… Continue reading Icon Usability: When and How to Evaluate Digital Icons

How to Create a Simple Web-Based Chat Application

In this tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website. Otherwise, learn how to build one yourself in this tutorial. This tutorial was updated recently to make improvements in the chat app.  Introduction The… Continue reading How to Create a Simple Web-Based Chat Application

A Guide to Accessible Interactive Components using React Libraries

May 29, 2020 Content Warning: This blog post contains gifs. I’ve wanted to write this blog post ever since I wrote a11y and JS – A Seemingly Unconventional Romance. I love JavaScript, and my job is to code in React. I often observe folks (rightly) critique that React Apps are inaccessible. According to the WebAIM… Continue reading A Guide to Accessible Interactive Components using React Libraries

How to Clear the WordPress Cache

Are you creating new pages, editing existing posts and generally improving your WordPress website, but those changes aren’t appearing on your actual website? Your web browser and plugins can all serve cached versions of your pages and posts, so what you’re currently seeing may not be what everyone else sees! In this article, I’ll show… Continue reading How to Clear the WordPress Cache

10 Best Restaurant WordPress Plugins

With the evolution of online shopping, more and more shoppers are buying food and groceries online. But in order for your restaurant website to stand out, you need the right plugins. In this tutorial, we are going to review some of the premium best restaurant plugins on CodeCanyon, and some great free plugins you can… Continue reading 10 Best Restaurant WordPress Plugins

OS.js – Open Source Desktop Implementation for Your Browser

OS.js is an open-source desktop implementation for a fully-fledged window manager to your browser, Application APIs, GUI toolkits and filesystem abstraction. It works in any modern browser and is implemented on any platform using Node or PHP. OS.js is completely free and open-source which means that you are able to contribute to the development or… Continue reading OS.js – Open Source Desktop Implementation for Your Browser

Multi-Level Menu : A simple menu with multiple levels

This is a simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button. The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the… Continue reading Multi-Level Menu : A simple menu with multiple levels

Slideout.js – Touch Slideout Navigation Menu for Web Apps

Slideout.js is a touch slideout navigation menu for your mobile web apps. it’s dependency-free with simple markup. It supports native scrolling. You can easily customize it as you wish. It supports different CSS transforms & transitions. Best of all, it’s just 4 Kb. Requirements: – Demo: https://mango.github.io/slideout/ License: MIT License

20 Online CSS3 Menu, Layout & Code Generators

Though CSS3 generators or tools are not necessary but can provide a strong start for your menu or layout designs. These tools can speed up the design workflow. You can change the code later according to your needs. In this article we featured 20 CSS3 menu, layout & code generators you can find online. These… Continue reading 20 Online CSS3 Menu, Layout & Code Generators

How To: Add a Responsive WordPress Mega Menu for Sites with Lots of Content

If you have a large amount of content on your site which you need to provide access to in your main navigation menu, this can become quite overwhelming to site visitors as they hover over your menu and a million drop downs appear, grouping your content can be quite a challenge. One way to overcome… Continue reading How To: Add a Responsive WordPress Mega Menu for Sites with Lots of Content

Building a Mega-Navigation Menu with CSS3 and jQuery

Larger navigation menus will typically include separate dropdown lists to appear on hover. But for some websites it can be necessary to expand this dropdown across the entire page. Designers might call this a “mega navigation” for its influence over the whole menu. In this tutorial I want to demonstrate a method of creating one… Continue reading Building a Mega-Navigation Menu with CSS3 and jQuery

25 CSS3 Code Snippets for Making 3D Animated Effects

Web developers have been immersing themselves into CSS3-based designs. Transition animations along with CSS keyframes have opened the door to many possibilities. 3D animation was never optimal outside of Flash-based websites. However the further advancements in JavaScript along with CSS3 have created a new code toolbox for web designers. I’ve put together a number of… Continue reading 25 CSS3 Code Snippets for Making 3D Animated Effects

20 Responsive Menu Tutorials with Free Scripts

Responsive designs are more and more frequently used today. Many people started using mobile devices, like smartphones or tablets, to browse the internet, and thus, having a fully responsive website is a must! But what is a responsive design? Responsive designs have specific CSS media queries added, in order to make them fit on any… Continue reading 20 Responsive Menu Tutorials with Free Scripts

27 Detailed Dropdown Menu Tutorials in CSS3 and HTML5

HTML5 and CSS3 have both revolutionised web design and we all see more powerful and functional websites using these two languages.HTML5 and CSS3 have many advantages like faster loading times,greater functionalities and more flexibility.You can apply to any website very easily. In today’s post we have gathered beautiful menu tutorials created using CSS3 and HTML5.The… Continue reading 27 Detailed Dropdown Menu Tutorials in CSS3 and HTML5

Create An Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes, and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into… Continue reading Create An Animated CSS Box Menu

Responsive Retina-Ready Menu

Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to… Continue reading Responsive Retina-Ready Menu

Top 20 FREE Navigation Menu Bars PSDs for Designers

The navigation menu is the most important element in a website. It structures the content, tells the visitors where to look for information and allows them to navigate on your website easily. It’s very important to have a well-designed navigation menu, and that is why we’ve selcted for you 20 of the best, most beautiful… Continue reading Top 20 FREE Navigation Menu Bars PSDs for Designers

Create a Quick, Sticky Menu

  During this quick tutorial we’re going to implement a sticky menu with CSS, toggling its visibility with jQuery. It’s the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings. Step 1: Setting up the Page Let’s start out by making a basic HTML page. We’ll… Continue reading Create a Quick, Sticky Menu

Simple YouTube Menu Effect

Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is… Continue reading Simple YouTube Menu Effect

CSS: Responsive Navigation Menu

Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I’ve discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked… Continue reading CSS: Responsive Navigation Menu

Design an Appealing Print-Ready Restaurant Menu in Illustrator

If you’ve ever seen a “food designer” fuss over every last detail of a delicious food item, you’d understand how exquisitely visual the food marketing process can be. The visual evaluation of food has been ingrained in the human psyche for thousands of years, and the right imagery can still elicit strong, visceral reactions (mostly… Continue reading Design an Appealing Print-Ready Restaurant Menu in Illustrator