Tag: navigation

background-image

A Responsive Multi-Level-Menu without JavaScript

Using the checked-hack to create a responsive dropdown menu

It’s been a while since I wrote something about doing JavaScript work with CSS. So I decided to create this responsive navigation using the :checked hack.

Continue reading “A Responsive Multi-Level-Menu without JavaScript”

background-image

A sticky navbar for blogger that is not 100% wide

how to fix a blogger navbar without it having to be 100% wide.

I think the first thing I did using JavaScript in Blogger was wa sticky nav. For me this always meant a sticky nav that’s 100% wide. That’s pretty simple to accomplish, but what do we need to do, to make this nav only the width of the content, like we have it in pretty much all of the original blogger templates. With a little plugin a wrote a while ago, this will be done in minutes.

Continue reading “A sticky navbar for blogger that is not 100% wide”

Two Menus, One Responsive Off-Canvas Navigation

two menus combined into one off-canvas nav

I created this menu at work, when we wanted to have two menus but just one off-canvas navigation after the collapse. The idea was to combine an off-canvas menu with a classic navbar and then merge them into one separate off-canvas navigation on the collapse. Suprisingly, this proved to be not as easy as I initially had thought. But it was still achieved in the end, here you’ll see how.

Continue reading “Two Menus, One Responsive Off-Canvas Navigation”

Basic responsive menu (off-canvas with flexbox)

pretty much the easiest 1-Level-Menu ever

Menus. The first Menu I wrote was a list that was made looking like a navigation with CSS. I still use a lisst for a drop down menu. But since we are finally ready to use Flexbox, I have given up on lists and turned to a simpler markip. This navigation is written with flexbos and becomes off-canvas once it collapses.

Continue reading “Basic responsive menu (off-canvas with flexbox)”

Responsive Blogger Menus: 3-Level dropdown from list

A dropdown menu without coding skills

When I first started creating responsive Websites, navigation was always one of the hardest things to accomplish. Because of that, I almost always went with Bootstrap. But using a pretty huge framework for something pretty small like a menu pretty soon started bothering me. So I searched for tutorials on how to write a responsive menu and soon started, to write my own, because there was almost always something that I did not like.

For all of you out there that are in the same position I was, when I started, I created this menu. It is a three level navigation, that will be generated from a simple link list.

Continue reading “Responsive Blogger Menus: 3-Level dropdown from list”