Hooli style popup #89
Conversation
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> |
There was a problem hiding this comment.
Please, add title of your page here
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <nav class="nav"> |
There was a problem hiding this comment.
Please, wrap navigation by tag header
| </li> | ||
| <li class="nav__item"> | ||
| <input type="checkbox" id="menu" class="check__input" tabindex="-1"> | ||
| <label for="menu"> |
There was a problem hiding this comment.
Please, add possibility to open and close menu with keyboard
|
|
||
| <hr> | ||
|
|
||
| <input type="checkbox" id="more" class="more__checkbox" tabindex="-1"/> |
There was a problem hiding this comment.
Please, add possibility to open hidden icons menu with keyboard
| @@ -0,0 +1,183 @@ | |||
| /* nav block */ | |||
There was a problem hiding this comment.
Don't leave unnecessary comments in files
| align-items: center; | ||
| } | ||
|
|
||
| .nav__ul li a { |
There was a problem hiding this comment.
Please, avoid styling by tags link
| <a href="#">Images</a> | ||
| </li> | ||
| <li class="nav__item"> | ||
| <!-- <input type="checkbox" id="menu" class="check__input" tabindex="-1"> --> |
There was a problem hiding this comment.
Please, remove unnecessary comments
| outline: 2px solid blue; | ||
| } | ||
|
|
||
| input[type='checkbox']:focus + label { |
There was a problem hiding this comment.
Please, avoid styling by tags at all, use class names link
| .popup { | ||
| right: -1em; | ||
| } | ||
| } |
| outline: 2px solid blue; | ||
| } | ||
|
|
||
| .check__input:focus + label { |
There was a problem hiding this comment.
Please, avoid styling by tags at ALL, use class names link
| outline: 2px solid blue; | ||
| } | ||
|
|
||
| .more__checkbox:focus + label { |
There was a problem hiding this comment.
Please, avoid styling by tags at ALL, use class names link
| display: block; | ||
| } | ||
|
|
||
| .popup ul { |
There was a problem hiding this comment.
Please, avoid styling by tags at ALL, use class names link
| box-shadow: 0px 0px 22px -1px rgba(0,0,0,0.12); | ||
| } | ||
|
|
||
| .popup__item a { |
There was a problem hiding this comment.
Please, avoid styling by tags at ALL, use class names link
| flex: 0 0 33%; | ||
| } | ||
|
|
||
| .more__popup__item a { |
There was a problem hiding this comment.
Please, avoid styling by tags at ALL, use class names link
| display: block; | ||
| } | ||
|
|
||
| .more__popup__open a { |
There was a problem hiding this comment.
Please, avoid styling by tags at ALL, use class names link
| color: black; | ||
| } | ||
|
|
||
| .more__popup__open a:hover { |
There was a problem hiding this comment.
Please, avoid styling by tags at ALL, use class names link
Hooli-style Popup
Code
Demo
The code is submitted in a dedicated feature branch.
Only code files are submitted.
Please, review.