recentpopularlog in

piperh : menu   145

« earlier  
The circular menu
nice circular pie chart style css popout menu. Uses border-radius and clip-path
webdesign  web  design  css  menu  pop-out  slide-out  circular  fan  nav 
9 weeks ago by piperh
Hamburger 3D CSS Switch animation
codepen example of an animated hamburger icon with a 3D turn effect
webdesign  web  design  css  code  hamburger  menu  icon  animation  animated 
may 2019 by piperh
Awesome accordion menu using only HTML & CSS
nice expanding/collapsing menu with no js. Has an extra 'accordion' effect which is daft, ignore it, the main expanding feature seems good (but test it thoroughly)
webdesign  web  design  menu  expand  collapse  css  vanilla  code 
april 2019 by piperh
Pushbar.js demo
Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps
It is fully customizable and dependency free.You can use it as sidebar menus or option drawers. With option to blur background content. Vanilla js
webdesign  web  design  menu  sliding  panel  door  overlay  js  javascript  script  vanilla  modal 
august 2018 by piperh
Solved With CSS! Dropdown Menus | CSS-Tricks
Demo of css only dropdown. BEWARE - doesn't work on iPad iOS 9.3.5 Safari & Chrome (7.5.18). On diff demos you can't dismiss menu or it doesn't appear at all.
Works correctly on Huawei (7.5.18) - tap anywhere to dismiss
webdesign  web  design  css  dropdown  menu  css-only  only 
may 2018 by piperh
Maintaining Accessibility in a Responsive World | Filament Group, Inc., Boston, MA
Filament Group article about coding accessible toggle button for visually hidden content (eg, a nav menu)
webdesign  web  design  toggle  menu  nav  responsive  accessible  accessibility  hidden  visually 
january 2018 by piperh
Sticky Slider Navigation (Responsive)
moving underline effect on menu as you scroll, to show current active part of list
webdesign  web  design  menu  navigation  effect  sticky  underline  scroll 
january 2018 by piperh
Progress Nav
interesting effect on menu as you scroll - highlights to current active part of list
webdesign  web  design  scroll  effect  menu  navigation 
january 2018 by piperh
Morphing Hamburger Menu with CSS
nice 'growing' effect for a hamburger menu. Author calls it morphing
webdesign  web  design  menu  navigation  effect  css 
january 2018 by piperh
CSS-Only Nested Dropdown Navigation
css-only dropdown menu with nice easing effect. Also has submenu but only dismissable by touching the menu item, not 'touch anywhere'
webdesign  web  design  menu  navigation  css  dropdown  foldout  nested 
january 2018 by piperh
Building Accessible Menu Systems — Smashing Magazine
about definition of 'drop-downs' etc and accessibility coding
webdesign  web  design  accessible  accessibility  menu  system 
january 2018 by piperh
Patterns - The A11Y Project
very handy code and script library for frequent actions and features: dropdowns, accordions, tabs, toggles, buttons, modals, tooltips and more.
webdesign  web  design  code  coding  js  javascript  script  toggle  modal  button  breadcrumb  aria  accessible  accessibility  pattern  menu  accordion  tab  tooltip  player 
november 2017 by piperh
Mega drop-down menus - Behavioural Research Consultancy
discussion of megamenus usability and issues, but not code howto
webdesign  web  design  navigation  megamenu  mega  menu  usability 
july 2017 by piperh
Building Mega Menus with Flexbox — SitePoint
walkthrough of building a mega menu using flexbox. Be sceptical about this, perhaps - check that it works on everything and is properly thought through. How does dismiss work?
webdesign  web  design  flex  flexbox  menu  megamenu  mega  nav  navigation 
july 2017 by piperh
Designing The Perfect Accordion – Smashing Magazine
detailed look at design for expanding accordion menus and items, especially (I think) on mobile
webdesign  web  design  accordion  menu  expand  collapse  expanding  collapsing  slideout  ui  ux  show  hide  toggle 
june 2017 by piperh
CSS sidebar toggle - SB
css-only slide-in sidebar (eg, for a menu) using translateX and checkbox. Smooth action (google recommend this type of transition and say don't use width 0 to 100 cos it causes redraws). Actually it isn't css only - there's some js for changed checkbox state
web  design  webdesign  code  css-only  css  checkbox  accessible  menu  sidebar  toggle  slide  slider 
april 2017 by piperh
CSS sidebar toggle
css only sidebar toggle with a bit of js for accessibility, aria states and tab index. Very smooth. I think it uses transformX but need to study it more. See orig article for breakdown. view in compiled mode. Code is absurdly complicated by convoluted font-size vh guff but the sidebar transition is good
webdesign  web  design  css  menu  sidebar  toggle  css-only  aria  accessible  code 
april 2017 by piperh
Great Alternatives to Hamburger Menus
article suggesting alternative navigation methods
webdesign  web  design  navigation  hamburger  menu  ui  ux  interface 
february 2017 by piperh
Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf
example of a menu with progressively hidden items using only css.
'More' always shows so you must always have at least 1 hidden item otherwise it's confusing
webdesign  web  design  navigation  menu  flexbox  css  nav  responsive  hide  hidden  progressively  example 
july 2016 by piperh
Colourful Flower Popup Menu
nice fancy pop out 'flower' menu using css transitions.
webdesign  web  design  popup  css  menu  circle  transform  transition 
march 2016 by piperh
Hamburgers by Jonathan Suh
nice collection of three-line hamburger icon animations, including tips on aria and accessibility and tab-index
webdesign  web  design  css  hamburger  animation  transform  menu  icon  open  close 
march 2016 by piperh
GitHub - VPenkov/okayNav: The world's okayest responsive navigation
a horizontal menu that progressively goes into a sidebar as the page narrows, so you could keep the most important links still showing on the left. Requires jQuery
webdesign  web  design  responsive  navigation  menu  collapsible  progressive  jquery  js  horizontal 
march 2016 by piperh
How to deal with :hover on touch screen devices
useful code for adding 'no-touch' class to elements - so you can code for both touchscreen and mouse hover
webdesign  web  design  modernizr  touch  no-touch  touchscreen  hover  tap  drop-down  css  code  coding  responsive  menu  jquery  js  javascript 
january 2016 by piperh
mblode/burger · GitHub
vanilla js slide-in, animated three-bar icon menu.
menu items slide in but panel appears via opacity (I think).
Used it on some amantaní pages, december 2018
webdesign  web  design  burger  hamburger  menu  navigation  animation  animated  js  javascript  vanilla 
january 2016 by piperh
joeldbirch/superfish · GitHub
not vanilla - requires jQuery. Dropdown menus for hover and touch
webdesign  web  design  menu  dropdown  query  js  javascript  hover  touch 
november 2015 by piperh
Using Quantity Queries to write content-aware CSS - tomango
Interesting post about quantity queries in css using e.g. nth-last-child and others.
Also, the site has a menu that transitions to completely cover the page.
webdesign  web  design  css  nth-last-child  first-child  quantity  queries  menu  navigation 
october 2015 by piperh
they say: "A set of small, responsive CSS modules that you can use in every web project". Includes some responsive menus but not slide out from side.
This is a Yahoo framework project
webdesign  web  design  grid  layout  responsive  css  code  modules  form  button  table  menu 
june 2015 by piperh
Responsive & Fixed One Page Nav
very nice js functionality for show/hide menu and one-page navigation. the icon transform is css only though the toggle clss needs script. No jQuery needed or other external dependency.
webdesign  web  design  vanilla  js  javascript  navigation  nav  responsive  menu  icon  hamburger  X  transform  transition  css  html 
may 2015 by piperh
Menu to cross icon
6 different ways to achieve the animated hamburger to cross transition
webdesign  web  design  menu  hamburger  icon  three-line  3-line  X  open  close  demo  code  howto  inspiration  css 
february 2015 by piperh
SlickNav - Responsive Mobile Menu Plugin for jQuery
interesting looking, simple drop down menu, allows for submenus. Seems to work OK on touch screen and desktop. Can plug in easing effects. ARIA compliant. Compatible back to IE7
responsive  menu  nav  jquery  navigation  webdesign  web  design  toggle  submenu  multi-level  collapse  dropdown 
january 2015 by piperh
Home | Gael Ltd
dropdowns that work on touch screen though on desktop you must click top level item - doesn't work on hover
webdesign  web  design  example  menu  navigation  drop-down  dropdown  touch  screen 
september 2014 by piperh
Touch-friendly drop-down menus
on touchscreen a tap off the menu will dismiss dropdown
web  design  webdesign  menu  nav  navigation  dropdown 
september 2014 by piperh
WWF - Endangered Species Conservation | World Wildlife Fund
interesting nav system: no sub menus for mobile, you're taken to a category landing page and from there you can choose sub categories.
webdesign  web  design  inspiration  wildlife  navigation  responsive  menu 
august 2014 by piperh
Implementing Off-Canvas Navigation For A Responsive Website | Smashing Magazine
"... by transitioning elements with 3-D transforms, the browser can generate render layers that are hardware-accelerated. There’s no need for JavaScript to worry about style or m-q breakpoints. JavaScript need only interpret user interaction and apply classes to maintain states - CSS defines the visual changes." Smooth on mobile.
webdesign  web  design  navigation  responsive  off-canvas  menu  css  nav  slide  slider 
august 2014 by piperh
Accessible Mega Menu
March 2018, this is linked to from a11y 'Patterns' page so I assume it must be still considered good. Requires jQuery.
adobe  mega  menu  accessible  webdesign  web  design  dropdown  flyout  navegation  nav  jquery  script  js 
august 2014 by piperh
Flaunt JS, stylish responsive navigations with nested click to reveal by @toddmotto |
jquery toggle type responsive menu solution. No way to dismiss open dropdown on touch screen. Also, with toggle open, if you open one dropdown then opening another doesn't close the first. And Todd looks suspiciously young
webdesign  web  design  responsive  menu  toggle  submenu  dropdown  hidden 
august 2014 by piperh
Superfish - Suckerfish on 'roids
Not responsive but can be used with meanmenu to make it so, or surely you could make it responsive yourself, no? (its only in the css, surely). In the examples shown you can dismiss dropdown with touch elsewhere. On desktop dropdowns appear on hover
jquery  navigation  menu  css  javascript  js  dropdown  flyout  nav  keyboard  touch  superfish  suckerfish  screen  accessible 
july 2014 by piperh
Naver Demo
responsive menu in jquery, used by Miles C. from Formstone collection
menu  responsive  navigation  mobile  basic  webdesign  web  design  system  demo 
july 2014 by piperh
Flawless clickable drop-down navigation
demo requires click to open dropdown, doesn't open on hover
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
Simple jQuery Drop Down Menu in WordPress | Scott Bolinger
the demo doesn't show dropdown on hover - requires click to open. But might be adaptable
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
James Barnett : Make CSS dropdown menus work on touch devices
haven't tested this, needs jQuery, but on the face of it looks straightforward
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
Drop-Down Navigation: Responsive and Touch-Friendly — Osvaldas Valutis
a tap outside the drop-down will dismiss it. Also you can toggle the menu symbol on touch screen. Script is short, but requires jquery. Actually it's clunky on the mobile and not good for aria.
navigation  menu  css  responsive  mobile  touch  screen  tap  hover  dropdown  web  design  webdesign 
june 2014 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:

to read