I have figured out how to close the expanded mobile menu after a mobile link is clicked, but can't figure out how to return the hamburger icon back to the bars. I'm using the npm package hamburger-react.
Here's the component:
import React, { useState } from "react";
import "./Navbar.css";
import { Fade as Hamburger } from "hamburger-react";
const Navbar = () => {
window.addEventListener("scroll", function () {
const header = document.querySelector(".header");
header.classList.toggle("active", window.scrollY > 0);
});
window.addEventListener("scroll", function () {
const hamburger = document.querySelector(".hamburger");
hamburger.classList.toggle("active", window.scrollY > 0);
});
const [click, setClick] = useState(false);
const handleClick = () => setClick(!click);
const closeMenu = () => setClick(false);
return (
<div className="parent">
<div className="header d__flex justify__content__flex__end pxy__30">
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li className="nav__items mx__15">
<a href="/" onClick={closeMenu}>
Home
</a>
</li>
<li className="nav__items mx__15">
<a href="#about" onClick={closeMenu}>
About
</a>
</li>
<li className="nav__items mx__15">
<a href="#projects" onClick={closeMenu}>
Projects
</a>
</li>
<li className="nav__items mx__15">
<a href="#contact" onClick={closeMenu}>
Contact
</a>
</li>
</ul>
<Hamburger
className="hamburger-react"
color="white"
direction="right"
rounded
onToggle={handleClick}
/>
</div>
</div>
);
};
export default Navbar;
Here's the css:
.parent {
height: 124px;
}
img {
padding-top: 5px;
}
.nav__items {
font-size: 18px;
}
.nav-menu {
display: flex;
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-link {
color: #fff;
}
ul a {
display: inline-block;
position: relative;
padding: 1.5em 0;
}
ul a:hover {
color: #f9004d;
}
ul a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.2em;
background-color: #f9004d;
opacity: 0;
transition: opacity 300ms, transform 300ms;
}
ul a:hover::after,
ul a:focus::after {
opacity: 1;
transform: translate3d(0, 0.2em, 0);
}
/* Scale from center */
ul a::after {
opacity: 1;
transform: scale(0);
transform-origin: center;
}
ul a:hover::after,
ul a:focus::after {
transform: scale(1);
}
.hamburger-react {
display: none;
position: fixed;
/* top: 3.2rem; */
top: 1rem;
right: 2rem;
transition: 0.4s all ease;
cursor: pointer;
}
.hamburger-react.active {
position: fixed;
/* z-index: 1000; */
top: 1.5rem;
right: 2rem;
}
.header {
transition: 0.4s all ease;
}
.header.active {
position: fixed;
z-index: 1;
width: 100%;
padding: 0px 30px;
background-color: #010101;
}
#media only screen and (max-width: 960px) {
.hamburger-react {
display: block;
z-index: 2;
}
.nav-menu {
position: fixed;
right: -100%;
flex-direction: column;
justify-content: center;
background-color: #010101;
width: 100%;
height: 100%;
text-align: center;
transition: 0.4s;
top: 0%;
}
.nav-menu.active {
right: 0;
z-index: 1;
}
.nav__items {
font-size: 1.5rem;
}
}
I feel like I need to add some more functionality to the closeMenu function that would return the hamburger back to bars, but haven't been successful.
Assuming that the goal is to change the hamburger icon back to the inactive look when closeMenu fires, try set toggled={click} as a prop for Hamburger.
It seems that the click state is intended to control the icon, and its handler events are all set, so Hamburger should just need to set it for toggled to get controlled.
<Hamburger
className="hamburger-react"
color="white"
direction="right"
rounded
// 👇 Pass the state to control the component
toggled={click}
onToggle={handleClick}
/>
I have this code: https://codepen.io/anon/pen/QdQEQW
As you can see, if you hover over "Dropdown" it also changes the background color of "V", the :after part. I do not want that. Simple. But I just can't get it done. I've googled and tried and tried but I just cant figure out how.
I've tried a bunch of different, variations, eg
.onclick-menu:hover.onclick-menu:after {
background: blue;
}
.onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover > onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover + onclick-menu:hover:after {
background: blue;
}
It seems to me that you want the following:
#top {
background: black;
line-height: 39px;
}
#top nav a {
color: #21262F;
padding: 10px 15px;
background: green;
}
#top nav a:hover {
background: red;
}
.onclick-menu {
position: relative;
display: inline-block;
}
.onclick-menu:after {
content: "V";
background: green;
margin-left: -4px;
padding: 8px 10px;
}
.onclick-menu:hover:after {
background: green;
}
.onclick-menu:focus {
outline: none;
pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.onclick-menu-content {
position: absolute;
z-index: 1;
background: #F4F4F4;
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
<div id="top">
<nav>
Hey
<div tabindex="0" class="onclick-menu">
Dropdown
<ul class="onclick-menu-content">
<li>Look, mom</li>
<li>no JavaScript!/li>
<li>Pretty nice, right?</li>
</ul>
</div>
Support
</nav>
</div>
For clarity's sake, this is the one:
.onclick-menu:hover:after {
background: green;
}
I don't understand why you added .onclick-menu twice in that selector in the first place. It's the pseudo element of the same item, so you don't need to repeat the parent.
I have a header with 2 dropdowns.
the dropdown menu position is absolute to it's wrapper container.
I want each dropdown menu width fit to the size of longest list entry. I am wondering if there is any solution without looping through li s and achieve it only using css?
<nav>
<div class="nav-dropdownContainer">
<div class="navdropdown nav-primary__dropdown">
<div class="navdropdown__text">
Themes
<i class="fa fa-chevron-down">+</i>
</div>
<ul class="navdropdown__list">
<li class="navdropdown__listItem">linktheme1</li>
<li class="navdropdown__listItem">linktheme2</li>
</ul>
</div>
<div class="navdropdown nav-primary__dropdown">
<div class="navdropdown__text">
tags
<i class="fa fa-chevron-down">+</i>
</div>
<ul class="navdropdown__list">
<li class="navdropdown__listItem">linktag1</li>
<li class="navdropdown__listItem">linktag2</li>
</ul>
</div>
</div>
</nav>
And CSS:
ul{
margin: 0;
padding: 0;
}
nav{
background-color: grey;
line-height: 35px;
}
.nav-dropdownContainer {
height: 70px;
width: 25%;
display: inline-block;
position: relative;
}
.navdropdown {
background-color: #455565;
display: inline-block;
border-right: 1px solid #fff;
height: 100%; }
.navdropdown:first-child {
border-left: 1px solid #fff; }
.navdropdown > ul {
margin: 0; }
.navdropdown:hover .navdropdown__text {
color: #fff; }
.navdropdown.open .navdropdown__text {
color: #fff; }
.navdropdown.open .navdropdown__list {
display: block; }
.navdropdown .fa-chevron-up,
.navdropdown .fa-chevron-down {
padding-left: 1rem;
font-size: 0.875rem; }
.navdropdown .navdropdown__text {
text-align: center;
cursor: pointer;
color: #ccc;
border-top: none;
padding: 1rem; }
.navdropdown__list {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
float: left;
width: 100%;
left: 0;
background-color: #455565;
list-style-type: none; }
.navdropdown__list .navdropdown__listItem {
width: 100%;
float: left;
padding: 1rem;
background-color: #374350;
margin: 0; }
.navdropdown__list .navdropdown__listItem > a {
text-decoration: none;
color: #fff;
cursor: pointer; }
.navdropdown__list .navdropdown__listItem:hover {
background-color: #374856; }
JS:
(function() {
// Cache DOM
var $body = $('body'),
$window = $(window),
_dropdownClassName = '.navdropdown',
$dropdownContainer = $('.nav-dropdownContainer');
$body.on('click', _dropdownClassName, toggleDropdown);
function closeAllDropdowns(){
$(_dropdownClassName).removeClass('open');
$('.navdropdown__text i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
/**
* toggle dropdown
*/
function toggleDropdown(){
const $this = $(this);
const $thisArrow = $this.find('.navdropdown__text i');
var leftPosition = $this.offset().left - $dropdownContainer.offset().left;
console.log('leftPosition', leftPosition);
if (window.Modernizr.mq('only screen and (max-width: 64em)')) {
$this.find('.navdropdown__list').css('left', 0);
}else{
if(leftPosition > 0){
$this.find('.navdropdown__list').css('left', leftPosition+'px');
}
}
if($thisArrow.hasClass('fa-chevron-down')){
closeAllDropdowns();
$this.addClass('open');
$thisArrow.removeClass('fa-chevron-down').addClass('fa-chevron-up');
}else{
closeAllDropdowns();
}
}
})();
Code Pen link: http://codepen.io/neginbasiri/pen/Xjgwkx
Add this to your navdropdown class : min-width: 40%;
It sets the minimum width of them to 40% of it's container width(If you have more items set this percentage proportional to the number of items).
If you want it be exactly like the biggest width involves some javascripts I don't recommend that way.
My question is actually more complex then the title, but I couldn't come up with a better one.
Initial Setup:
I use Bootstrap v4.0.0-alpha.2 and I ripped out this simple sidebar. I'm not sure why and if it's relevant but I also set flex: true in my _library-variable-overrides.scss (I use css-burrito) but since I only set it to try it out, I'm probably okay with turning it off. ;-)
What I want to do:
I would like to have a button in the sidebar that is bottom aligned. Ideally it's centered horizontally in the sidebar and has about 1em margin to the bottom.
What my code looks like:
_shell.scss & _sidenav.scss:
#shell-wrapper {
padding-left: 0;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
padding-left: 250px;
#shell-content-wrapper {
position: absolute;
margin-right: -250px;
}
}
#media(min-width:768px) {
#shell-wrapper {
padding-left: 250px;
}
#shell-wrapper.toggled {
padding-left: 0;
#shell-content-wrapper {
position: relative;
margin-right: 0;
}
}
#shell-content-wrapper {
padding: 20px;
position: relative;
}
}
#sidenav-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
#sidenav-wrapper {
width: 250px;
}
}
#shell-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
/* Sidenav Styles */
.sidenav-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
li {
text-indent: 20px;
line-height: 40px;
a {
display: block;
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
a:active, a:focus {
text-decoration: none;
}
}
>.sidenav-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
a {
color: #999999;
}
a:hover {
color: #fff;
background: none;
}
}
}
#media(min-width:768px) {
#sidenav-wrapper {
width: 250px;
}
#shell-wrapper.toggled #sidenav-wrapper {
width: 0;
}
}
and index.html:
<div id="shell-wrapper" class="toggled">
<div id="sidenav-wrapper">
<ul class="sidenav-nav">
<li class="sidenav-brand">
Brand
</li>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li id="logout">
<button class="btn btn-danger-outline">Logout</button>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button">
☰
</button>
<div id="shell-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Main Content Here-->
</div>
</div>
</div>
</div>
</div>
The logout button is one in question. I just tried doing it as a <li> of the sidenav-nav but I'm not tied to this setup.
What I have tried so far:
a lot!
What came closest to what I want was adding this:
.sidenav-nav {
height: 100%;
}
#logout {
position: absolute;
bottom: 1em;
}
It's pretty close to my goal on a desktop browser, but hitting that show me this on a phone button in chrome, the logout button is just gone.
i haven't worked with css-buritto, but you could look into giving the button a class or id and passing the position:relative argument you can then set a bottom: 1em and that should position the button at the bottom. alternativly you can also look into the other position elements like fixed that could also do the trick
like you mentioned a the end
#logout {
position: relative;
bottom: 1em;
}
I'm developing a site that actively uses CSS3 transitions and flexbox-based layout. It works well in Chrome, Firefox, iPad 2 (Safari) and even in Windows Phone 8.1 (not sure which version of IE is in there). But in Edge I see some strange visual glitches, what seems to appear on hover state.
So here is what I get in every modern browser (except Edge, obviously):
And this is what get in Edge:
As you can see, it's totally messed up. And also there is another window right to the Edge window, and Edge somehow bring this "trouble" to another window. Moreover, I was not able to screenshot this (Edge repaints window right before shooting) so I've captured it on photo. This is not the only buggy place, it happens everywhere with CSS transitions, independetly what and for how long it animates. And every trouble is unique, I can't catch some pattern and realize what's the problem.
At first it seems like graphic driver or hardware issues, but it's a new computer (by "new" I mean 3-days-old) with new hardware and clean Windows 10 with every update installed, and I can't see anything like this bug on any other site in Edge or in any other browser or application.
Is it common or only I'm so lucky? And what can I do, except to remove any animation in Edge? My GPU is Intel HD 530, BTW.
upd: I'm sorry, I forgot to include this:
function calcTooltips() {
$('.photo').hide().show(0);
if ( $(window).innerWidth() >= 769 ) {
$('.tt-center').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left + 'px'
});
});
$('.tt-left').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth * 2 + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left + 'px'
});
});
$('.tt-right').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth * 2 + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left - pWidth + 'px'
});
});
}
}
function initTooltips() {
$(window).load(calcTooltips);
$(window).resize(calcTooltips);
$(window).scroll(calcTooltips);
$('.tt-trigger').hover(function() {
var index = $(this).data('tooltip');
$('.tooltip.tt[data-tooltip="' + index + '"]').finish().fadeIn('fast');
}, function() {
var index = $(this).data('tooltip');
$('.tooltip.tt[data-tooltip="' + index + '"]').fadeOut('fast');
});
}
function initMobileMenu() {
$(window).resize(function() {
if ( $(window).width() >= 961 ) {
$('#mobile-menu').hide();
$('main').removeClass('blurred');
$('footer').removeClass('blurred');
}
});
$('.toggle-button').click(function() {
$('#mobile-menu').toggle('slide', {}, 'fast');
$('main').toggleClass('blurred');
$('footer').toggleClass('blurred');
$('body').toggleClass('noscroll');
});
}
var didScroll;
var lastScrollTop = 0;
var delta = 50;
var navbarHeight = $('#classic-menu').outerHeight();
function hasScrolled() {
if ( $(window).innerWidth() >= 769 ) {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight) {
$('#classic-menu').removeClass('nav-down').addClass('nav-up');
$('.tooltip.tt').hide();
} else {
if(st + $(window).height() < $(document).height()) {
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
}
function initScroll() {
$(window).scroll(function(event){
didScroll = true;
});
$(window).resize(function(event){
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
}
var activeSlide = '';
function initSlides() {
$('.slide').click(function() {
if ( !$(this).hasClass('active') ) {
$('.slide.active').removeClass('active');
$(this).toggleClass('active');
activeSlide = $(this).data('slide');
}
});
}
var formRegexps = {
'name': /^.{2,}$/,
'address': /^.{6,}$/,
'email': /^\w+([\.\w]+)*\w#\w((\.\w)*\w+)*\.\w{2,3}$/,
'tel': /^\+7 \([0-9]{3}\) [0-9]{3} [0-9]{2}-[0-9]{2}$/
}
var formReturns = {
'name': false,
'address': false,
'email': false,
'tel': false
}
function formValidate() {
var isValid = true;
$.each(formRegexps, function(key, value) {
var exp = new RegExp(formRegexps[key]);
formReturns[key] = exp.test($('#' + key).val());
if (!formReturns[key]) { isValid = false }
});
return isValid;
}
function formShowErrors() {
$.each(formReturns, function(key, value) {
if (!formReturns[key]) {
$('.' + key + '-message').show();
}
});
$('.check-message.overall-message').show();
}
function formHideErrors() {
$.each(formReturns, function(key, value) {
$('.' + key + '-message').hide();
});
$('.check-message.overall-message').hide();
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
}
function initFormCheck() {
$('form').submit(function (evt) {
formHideErrors();
if ( formValidate() == true ) {
evt.preventDefault(); // DELETE THIS LATER
} else {
evt.preventDefault();
formShowErrors();
}
});
}
function initPhoneInput() {
$('#tel').mask('+7 (999) 999 99-99');
}
$(function() {
initTooltips();
initMobileMenu();
initScroll();
initSlides();
initFormCheck();
initPhoneInput();
});
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
background: inherit;
color: inherit;
text-decoration: none;
}
ul {
list-style-type: none;
}
input,
select,
button {
outline: none;
}
img,
button,
.button,
.column h1,
.column h2,
.column h3,
.slide h1,
.slide h2,
.slide h3 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Colors */
/* Shadows */
/* Borders */
/* Typography */
body,
input,
button {
font-family: 'Roboto', sans-serif;
}
p {
font-size: 17px;
}
/* Media Queries */
/* Base Layout */
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body,
header,
main,
nav,
footer,
.layout,
.column,
.container,
.links,
.header-content,
.flex,
.full-flex .splash-link-inner {
display: flex;
}
#media (max-width: 960px) {
body,
main,
footer {
transition: -webkit-filter 0.3s, -moz-filter 0.3s, filter 0.3s;
}
}
body {
flex-flow: column;
min-height: 100vh;
background: url('../assets/images/temp-bg.jpg') fixed;
background-size: cover;
}
main {
flex: 1 0 auto;
align-self: center;
margin: 87px 0 0 0;
padding: 1rem 0 0 0;
justify-content: center;
align-items: flex-start;
width: 100%;
}
#media (max-width: 960px) {
main {
margin: 0;
padding: 4rem 0 0 0;
}
}
p {
margin: 1rem;
}
.photo {
width: 100%;
}
/* Containers */
.main.container {
flex-flow: column;
background: rgba(0, 0, 0, 0.8);
color: #F7F7F7;
padding: 1rem 1rem 0 1rem;
margin: 0 0 1rem 0;
width: 100%;
max-width: 960px;
}
.main.container.narrow {
max-width: 640px;
}
/* Header */
header {
z-index: 101;
flex-shrink: 0;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #F7F7F7;
position: fixed;
top: 0;
width: 100%;
transition: top 0.2s;
}
.header-content {
justify-content: space-around;
flex: 1;
padding: 0 .5rem;
}
/* Footer */
footer {
z-index: 100;
width: 100%;
height: auto;
min-height: 1.4rem;
padding: 1rem 0;
justify-content: flex-end;
background: rgba(0, 0, 0, 0.6);
color: #F7F7F7;
}
#media (max-width: 768px) {
footer {
flex-flow: column;
align-items: center;
}
}
footer .links {
min-height: 1.4rem;
}
#media (max-width: 768px) {
footer .links {
padding-right: 1rem;
}
}
footer .links a {
margin: 0 1rem;
}
#media (max-width: 540px) {
footer .links a {
margin-left: 0;
margin-right: .5rem;
}
}
#media (max-width: 768px) {
footer .links a.last-link {
margin-right: 0;
}
}
footer .links a:hover {
opacity: 1;
border-bottom: 2px dashed #FFF;
}
#media (max-width: 768px) {
footer .links,
footer .copyright {
margin: 0;
padding: 0;
}
}
footer .phone {
margin: 0 1rem;
}
#media (max-width: 768px) {
footer .phone {
display: none;
}
}
footer .phone:hover {
opacity: 1;
}
footer .copyright,
footer .links a,
footer .phone {
opacity: 0.8;
}
/* Horizontal Divider */
hr {
border-color: #F7F7F7;
}
/* Links */
.splash-link,
.nav-link-container {
transition: .3s;
}
/* Buttons */
.button {
display: block;
padding: 0 1rem;
line-height: 2rem;
transition: .2s;
border: 0;
cursor: pointer;
font-size: 16px;
}
.button i {
margin-right: .5rem;
}
.button.accent {
background: #F7F7F7;
color: #303030;
}
.button.accent:hover,
.button.accent:active {
background: #dedede;
}
.action {
background: #FF530D;
color: #F7F7F7;
}
.action:focus {
background: #FF530D;
color: #F7F7F7;
}
.action:hover,
.action:active {
background: #d93f00;
}
.positive {
background: #1ABC9C;
color: #F7F7F7;
}
.positive:focus {
background: #1ABC9C;
color: #F7F7F7;
}
.positive:hover,
.positive:active {
background: #148f77;
}
.neutral {
background: #F7F7F7;
color: #303030;
}
.neutral:focus {
background: #F7F7F7;
color: #303030;
}
.neutral:hover,
.neutral:active {
background: #dedede;
}
.negative {
background: #E74C3C;
color: #F7F7F7;
}
.negative:focus {
background: #E74C3C;
color: #F7F7F7;
}
.negative:hover,
.negative:active {
background: #d62c1a;
}
/* Forms */
input,
select {
margin-left: .5rem;
padding: .5rem;
}
input {
font-size: 18px;
letter-spacing: .25px;
}
input:not(.modal) {
border: none !important;
}
select {
font-size: inherit;
}
/* Helpers */
.left-sided {
padding-left: 1rem;
margin-right: auto;
}
.right-sided {
padding-right: 1rem;
margin-left: auto;
}
.left-fixed {
left: 0;
}
.right-fixed {
right: 0;
}
.flex {
flex: inherit !important;
}
.full-flex {
flex: 1 1 100% !important;
}
#media (max-width: 960px) {
.hideable {
display: none;
}
}
.hidden {
display: none;
}
.blurred {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
}
.noscroll {
overflow: hidden;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.nav-up {
top: -88px;
}
/* Menu */
#media (max-width: 960px) {
#classic-menu .header-content,
#mobile-menu .header-content {
display: none;
}
}
#classic-menu .nav-link-container,
#mobile-menu .nav-link-container {
display: flex;
flex: 1;
align-items: center;
color: #F7F7F7;
text-align: center;
justify-content: center;
}
#classic-menu .nav-link-container .nav-link,
#mobile-menu .nav-link-container .nav-link {
font-weight: bold;
text-transform: uppercase;
}
#classic-menu .nav-link-container .nav-link:after,
#mobile-menu .nav-link-container .nav-link:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 0.2s ease, background-color 0.2s ease;
}
#classic-menu .nav-link-container.active,
#mobile-menu .nav-link-container.active {
color: #ababab;
}
#classic-menu .nav-link-container:hover:not(.active) > .nav-link:after,
#mobile-menu .nav-link-container:hover:not(.active) > .nav-link:after {
width: 100%;
background: #F7F7F7;
}
#mobile-menu {
width: 100%;
height: 100%;
position: fixed;
margin-top: 51px;
display: none;
}
#mobile-menu .mobile-header-content {
margin-top: -102px;
width: 100%;
}
#mobile-menu .mobile-header-content .logo-link {
display: flex;
align-items: center;
justify-content: center;
}
#media (max-height: 280px) {
#mobile-menu .mobile-header-content .logo-link {
display: none;
}
}
#mobile-menu .mobile-header-content .nav-link {
padding: 1rem;
}
/* Logo */
.logo {
width: 220px;
}
/* Toggle Button */
.toggle-button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: fixed;
background: rgba(0, 0, 0, 0.8);
left: 0;
right: 0;
cursor: pointer;
text-align: center;
font-weight: bold;
text-transform: uppercase;
color: #F7F7F7;
padding: 1rem;
z-index: 102;
display: none;
}
#media (max-width: 960px) {
.toggle-button {
display: block;
}
}
.toggle-button i {
width: 30px;
}
/* Tooltips */
.tooltip {
text-align: center;
background: rgba(0, 0, 0, 0.8);
color: #F7F7F7;
position: absolute;
z-index: 1000;
display: none;
}
.tooltip p {
margin: .65rem;
}
/* Slide */
.slides.container {
margin-bottom: 1rem;
justify-content: space-between;
}
#media (max-width: 540px) {
.slides.container {
flex-flow: column;
}
}
.slides.container .slide {
display: flex;
align-items: flex-end;
justify-content: center;
flex: 1;
min-height: 200px;
padding: 1rem;
cursor: pointer;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
margin: 0 1rem 0 0;
transition: .2s;
}
#media (max-width: 540px) {
.slides.container .slide {
margin: 0 0 1rem 0;
align-items: center;
min-height: 100px;
}
.slides.container .slide:hover {
flex: 1;
}
}
.slides.container .slide .header {
text-shadow: 0 2px 5px #000;
transition: .2s;
}
.slides.container .slide:hover:not(.active) {
flex: 3;
}
.slides.container .slide.first-slide {
background-image: url('../assets/images/first-option.jpg');
background-size: cover;
}
.slides.container .slide.second-slide {
background-image: url('../assets/images/second-option.jpg');
background-size: cover;
}
.slides.container .slide.third-slide {
background-image: url('../assets/images/third-option.jpg');
background-size: cover;
margin: 0;
}
.slides.container .slide.active {
opacity: .5;
cursor: default;
}
.slides.container .slide.active .header {
text-shadow: none;
}
/* Form */
.form {
margin-top: 1rem;
margin-bottom: 1rem;
}
.form form {
display: flex;
flex-flow: column;
}
.form form .row {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.form form .row label {
width: 100px;
}
.form form .row input {
width: 100%;
}
.form button {
align-self: flex-end;
}
.asterisk {
margin: 0 .2rem 0 .2rem;
color: #FF3800;
}
/* Paragraph Override */
p {
margin: 0;
}
p.check-message {
margin: 0 0 1rem 100px;
text-align: center;
display: none;
}
p.check-message .fa {
color: #FF3800;
}
p.check-message.overall-message {
border-top: 1px solid #F7F7F7;
margin: 0 0 1rem 0;
padding: .5rem 0 0 0;
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="../favicon.ico?v=2">
<link rel="stylesheet" href="../styles/vendor/pace.css">
<script src="../scripts/vendor/pace.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic">
<link rel="stylesheet" href="../styles/vendor/font-awesome.min.css">
<!-- FOR DEVELOPMENT ONLY -->
<link rel="stylesheet" href="../styles/order.dev.css"> <!-- END -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script> -->
</head>
<body><header id="classic-menu" class="remodal-bg">
<div class="header-content">
<div class="flex">
<span class="nav-link">Каталог</span><span class="nav-link">Тач-панели</span><span class="nav-link">Заказ</span> </div>
<img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo">
<div class="flex">
<span class="nav-link">Где купить</span><span class="nav-link">Поддержка</span><span class="nav-link">Контакты</span> </div>
</div>
</header>
<div class="toggle-button"><i class="fa fa-reorder"></i>Меню</div>
<header id="mobile-menu">
<div class="mobile-header-content">
<img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo">
<div class="flex">
<span class="nav-link">Каталог</span><span class="nav-link">Тач-панели</span><span class="nav-link">Заказ</span> </div>
<div class="flex">
<span class="nav-link">Где купить</span><span class="nav-link">Поддержка</span><span class="nav-link">Контакты</span> </div>
</div>
</header>
<div class="tooltip tt" data-tooltip="0">
<p>Главная страница</p>
</div>
<div class="tooltip tt" data-tooltip="1">
<p>Каталог стандартных решений на основе ПЛК</p>
</div>
<div class="tooltip tt" data-tooltip="2">
<p>Передовые решения с использованием тач-панелей</p>
</div>
<div class="tooltip tt" data-tooltip="3">
<p>Заказ уникального решения</p>
</div>
<div class="tooltip tt" data-tooltip="4">
<p>Информация о магазинах</p>
</div>
<div class="tooltip tt" data-tooltip="5">
<p>Обновление ПО и замена запчастей</p>
</div>
<div class="tooltip tt" data-tooltip="6">
<p>Адреса и телефоны</p>
</div><main>
<div class="main container narrow">
<div class="slides container">
<div class="slide first-slide " data-slide="first"><h2 class="header">First Option</h2></div>
<div class="slide second-slide " data-slide="second"><h2 class="header">Second Option</h2></div>
<div class="slide third-slide " data-slide="touch-panel"><h2 class="header">Тач-панель</h2></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deleniti, beatae eum totam odit expedita modi laudantium praesentium, quasi vero nihil doloribus consequatur! Aspernatur quae numquam nulla quidem iusto reiciendis hic deserunt a eaque ad ipsa, quibusdam magni laborum similique, rem laboriosam odit! Voluptates adipisci magni expedita fugit autem totam.</p>
<div class="form">
<form action="" method="post">
<div class="row">
<label for="name">Имя<span class="asterisk">*</span>:</label>
<input type="text" name="name" id="name" placeholder="Иван Иванов">
</div>
<p class="check-message name-message"><i class="fa fa-warning"></i> Имя должно состоять из 2 символов или более.</p>
<div class="row">
<label for="address">Адрес<span class="asterisk">*</span>:</label>
<input type="text" name="address" id="address" placeholder="ул. Первая, 32">
</div>
<p class="check-message address-message"><i class="fa fa-warning"></i> Адрес должно состоять из 7 символов или более.</p>
<div class="row">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" placeholder="example#mail.ru">
</div>
<p class="check-message email-message"><i class="fa fa-warning"></i> E-mail должен быть верным.</p>
<div class="row">
<label for="tel">Телефон<span class="asterisk">*</span>:</label>
<input type="text" name="tel" id="tel" placeholder="+7 (900) 800 70-60">
</div>
<p class="check-message tel-message"><i class="fa fa-warning"></i> Телефон должен состоять только из цифр.</p>
<p class="check-message overall-message">Форма заполнена неверно. Обратите внимание, что так <span class="asterisk">*</span> помечены обязательные к заполнению поля.</p>
<button class="positive button"><i class="fa fa-check"></i> Отправить</button>
</form>
</div>
</div>
</main> <footer class="remodal-bg">
<span class="left-sided copyright">© 2009—2016 ООО «ИПН»</span>
<div class="links">
Обратная связь
Оферта
Карта сайта
</div>
<span class="phone"><i class="fa fa-phone"></i> +7 (863) 231-09-18</span>
</footer>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>
<script src="../scripts/vendor/maskedinput.min.js"></script>
<script src="../scripts/order.js"></script>
</body>
</html>
This is a part of site, it was taken very roughly, but should be readable. All you need to do is to click on "Меню" button and hover on some links. It triggers bug for me in Edge.