Inspiration for Line Menu Styles

Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection; contributions are welcome!

LineMenuStyles

View demo Download source

The line is an amazing design element. It’s so versatile and it allows us to use it for adding enjoyable animations or enhance points of interest. Today we’d like to share a set of ideas for using the line as a design element in horizontal menus. There are many creative possibilities, some minuscule and subtle, others bold and more extravagant. We’ve prepared a little inspirational set for you where we explore some line menu styles.

We’d also like to invite you to contribute your style to this open collection. Check out the details on GitHub.

menustyle

Let’s have a look at the markup which is, aside from some exceptions, the same for every menu style:


<section class="section section--menu" id="Prospero">

	<h2 class="section__title">Prospero</h2>

	<nav class="menu menu--prospero">

		<ul class="menu__list">
			<li class="menu__item menu__item--current">
				<a class="menu__link">Home</a>
			</li>
			<li class="menu__item">
				<a class="menu__link">Who we are</a>
			</li>
			<li class="menu__item">
				<a class="menu__link">What we offer</a>
			</li>
			<li class="menu__item">
				<a class="menu__link">Our news</a>
			</li>
			<li class="menu__item">
				<a class="menu__link">Contact us</a>
			</li>
		</ul>
		
	</nav>

</section>

The menu__item--current class indicates the currently selected item. Note that we use a BEM naming convention but allow for the main nav to have an indicative class that we then use in our stylesheet (component.css) to define the individual styles.

Let’s have a look at the common styles for all menus:

.menu {
	line-height: 1;
	margin: 0 auto 3em;
}

.menu__list {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__item {
	display: block;
	margin: 1em 0;
}

.menu__link {
	font-size: 1.05em;
	font-weight: bold;
	display: block;
	padding: 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.menu__link:hover,
.menu__link:focus {
	outline: none;
}

We’ll use flexbox for the menu layout and define some common styles for the links.

The following is an effect style example (vendor prefixed properties omitted):

/* Prospero */

.menu--prospero .menu__link {
	position: relative;
	display: block;
	margin: 0 1.5em;
	padding: 0.75em 0;
	text-align: center;
	color: #b5b5b5;
	transition: color 0.3s;
}

.menu--prospero .menu__link:hover,
.menu--prospero .menu__link:focus {
	color: #929292;
}

.menu--prospero .menu__item--current .menu__link {
	color: #d94f5c;
}

.menu--prospero .menu__link::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #d94f5c;
	transform: scale3d(0, 1, 1);
	transition: transform 0.1s;
}

.menu--prospero .menu__item--current .menu__link::before {
	transform: scale3d(1, 1, 1);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.3s;
}

In this effect we simply use a pseudo element line that starts to expand from the middle. It is positioned absolutely at the bottom of the link and initially scaled to 0 on the X. When we select a menu item by clicking on it, the line gets scaled to 1.

We hope you enjoy this little set and find it inspirational!

Don’t forget to fork the repo and add your styles if you like. Read more about it on the GitHub project page:

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 34

  1. 1

    I create the same effect but that code is so much faster an better … thanks i gonna learn and use your code if is not a problem
    from brasil :D

  2. 2

    Hi Ursula, I would be very happy if you could tell me about the javascript that you are using in order to have the link href working. Thanks a lot. Gunnar

  3. 3

    If you want to be able to use these nav bars and have the links working, may it be linked to an anchor link or external you’ll need to remove ev.preventDefault(); as this is what prevents a link from doing it’s default thing which is to follow the address.

  4. 7

    // Remove js code in demo and replace with this:

    $(document).ready(
    $(“.menu__item”).click(‘.menu__link’,function(e){
    $(“.menu__item”).removeClass(“menu__item–current”);
    $(this).addClass(“menu__item–current”);
    })
    );
    $(‘a’).click(function (e) {
    e.preventDefault(); // prevent default anchor behavior
    var goTo = this.getAttribute(“href”); // store anchor href

    // do something while timeOut ticks …

    setTimeout(function(){
    window.location = goTo;
    },300);
    });

    // this adds slight delay before going to hard link allowing the animation

  5. 8

    Hello,

    Does anybody have an idea to reproduce the “Adrian” effect on an element that doesn’t have a fixed width ?

    Thank you very much for sharing this.

  6. 9

    This is just awesome…. I love the effect Valentine…. but I just wanted this effect to work on hover not on click,
    Please help me with this…
    Thanks a lot!!

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>