A fluid navigation that makes use of css3 transitions as you hover over the link items.
A Pen by Mario Hernandez on CodePen.
// ---- | |
// Sass (v3.4.1) | |
// Compass (v1.0.1) | |
// ---- | |
.theme-magazine .nice-menu | |
top: 5px | |
left: 195px | |
position: absolute | |
.admin-menu & |
// ---- | |
// Sass (v3.4.4) | |
// Compass (v1.0.1) | |
// ---- | |
p { | |
a { | |
color: red; | |
.footer & { | |
color: purple; |
// ---- | |
// Sass (v3.4.4) | |
// Compass (v1.0.1) | |
// ---- | |
.read-more-button | |
display: inline-block | |
padding: 8px 25px | |
color: white | |
text-decoration: none |
<div class="container"> | |
<header role="header">Header</header> | |
<div class="content-wrapper"> | |
<section class="main-content"> | |
Main Content | |
</section> | |
<aside class="sidebar"> | |
Sidebar | |
</aside> | |
</div> |
{# Attach card library #} | |
{{ attach_library('demo/card') }} | |
{# Import icons macro #} | |
{% import '@demo/icons/icons.twig' as icons %} | |
<div class="card"> | |
<div class="card__image">{{ image }}</div> | |
<h2 class="card__name">{{ name }}</h2> | |
<div class="card__social-media"> | |
<div class="card__social-media--label">Follow on:</div> | |
<ul class="menu card__menu--social"> |
{ | |
"image": "<img src='assets/miriam-werner.png' alt='Miriam B. Werner' />", | |
"name":"Miriam B. Werner", | |
"bio":"Miriam B. Weiner is an experienced travel writer and editor based in Washington, D.C. She has traveled all around Europe, as well as to countries in Africa and the Middle East. Now she’s set her sights on visiting the U.S. National Parks while providing the inspiration and information others need to make the most of America’s wilderness.", | |
"showBio": "View full biography", | |
"hideBio": "Hide biography", | |
"socialLinks": [ | |
{ | |
"icon": "instagram", | |
"url": "http://instagram.com" |
(function ($) { | |
'use strict'; | |
Drupal.behaviors.card = { | |
attach: function (context, settings) { | |
var $bioButton = $('.card__view-bio', context); | |
var $bioDrawer = $('.card__bio', context); | |
var showBio = 'View full biography'; | |
var hideBio = 'Hide biography'; |