0
このドロップダウンメニューを反応させることができる人は誰ですか？私が持っている 問題は、私は、ブラウザのサイズを変更するときのボックスが左浮くということですドロップダウンメニューを反応的にするには？
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 animated & responsive dropdown menu</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<nav class="animenu">
<button class="animenu__toggle">
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
</button>
<ul class="animenu__nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Archive</a>
<ul class="animenu__nav__child">
<li><a href="">Sub Item 1</a></li>
<li><a href="">Sub Item 2</a></li>
<li><a href="">Sub Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Categories</a>
<ul class="animenu__nav__child">
<li><a href="">Sub Item 1</a></li>
<li><a href="">Sub Item 2</a></li>
<li><a href="">Sub Item 3</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<script src="js/index.js"></script>
</body>
</html>
CSS
*, *:after, *:before {
box-sizing: border-box;
}
.animenu__toggle {
display: none;
cursor: pointer;
background-color: #111;
border: 0;
padding: 10px;
height: 40px;
width: 40px;
}
.animenu__toggle:hover {
background-color: #0186ba;
}
.animenu__toggle__bar {
display: block;
width: 20px;
height: 2px;
background-color: #fff;
transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
}
.animenu__toggle__bar + .animenu__toggle__bar {
margin-top: 4px;
}
.animenu__toggle--active .animenu__toggle__bar {
margin: 0;
position: absolute;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {
transform: rotate(45deg);
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {
opacity: 0;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {
transform: rotate(-45deg);
}
.animenu {
display: block;
}
.animenu ul {
padding: 0;
list-style: none;
font: 0px 'Open Sans', Arial, Helvetica;
}
.animenu li, .animenu a {
display: inline-block;
font-size: 15px;
}
.animenu a {
color: #aaaaaa;
text-decoration: none;
}
.animenu__nav {
background-color: #111;
}
.animenu__nav > li {
position: relative;
border-right: 1px solid #444444;
}
.animenu__nav > li > a {
padding: 10px 30px;
text-transform: uppercase;
}
.animenu__nav > li > a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
border: 4px solid transparent;
border-bottom: 0;
border-top-color: currentColor;
top: 50%;
margin-top: -2px;
right: 10px;
}
.animenu__nav > li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
.animenu__nav > li:hover > a {
color: #fff;
}
.animenu__nav__child {
min-width: 100%;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
margin: 20px 0 0 0;
background-color: #373737;
transition: margin .15s, opacity .15s;
}
.animenu__nav__child > li {
width: 100%;
border-bottom: 1px solid #515151;
}
.animenu__nav__child > li:first-child > a:after {
content: '';
position: absolute;
height: 0;
width: 0;
left: 1em;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
}
.animenu__nav__child > li:last-child {
border: 0;
}
.animenu__nav__child a {
padding: 10px;
width: 100%;
border-color: #373737;
}
.animenu__nav__child a:hover {
background-color: #0186ba;
border-color: #0186ba;
color: #fff;
}
@media screen and (max-width: 767px) {
.animenu__toggle {
display: inline-block;
}
.animenu__nav,
.animenu__nav__child {
display: none;
}
.animenu__nav {
margin: 10px 0;
}
.animenu__nav > li {
width: 100%;
border-right: 0;
border-bottom: 1px solid #515151;
}
.animenu__nav > li:last-child {
border: 0;
}
.animenu__nav > li:first-child > a:after {
content: '';
position: absolute;
height: 0;
width: 0;
left: 1em;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
}
.animenu__nav > li > a {
width: 100%;
padding: 10px;
border-color: #111;
position: relative;
}
.animenu__nav a:hover {
background-color: #0186ba;
border-color: #0186ba;
color: #fff;
}
.animenu__nav__child {
position: static;
background-color: #373737;
margin: 0;
transition: none;
visibility: visible;
opacity: 1;
}
.animenu__nav__child > li:first-child > a:after {
content: none;
}
.animenu__nav__child a {
padding-left: 20px;
width: 100%;
}
}
.animenu__nav--open {
display: block !important;
}
.animenu__nav--open .animenu__nav__child {
display: block;
}
SCSS
// Variables
$baseMenuBackground: #111; // Base color theme
$secondaryMenuBackground: #0186ba; // Secondary color (highlights, triangles...)
$gutter: 10px; // Base gutter
// Latest CSS box model
*, *:after, *:before {
box-sizing: border-box;
}
// The classic hamburger icon
// <button class="animenu__toggle">
// <span class="animenu__toggle__bar"></span>
// <span class="animenu__toggle__bar"></span>
// <span class="animenu__toggle__bar"></span>
// </button>
.animenu__toggle {
display: none;
cursor: pointer;
background-color: $baseMenuBackground;
border: 0;
padding: 10px;
height: 40px;
width: 40px;
&:hover {
background-color: $secondaryMenuBackground;
}
}
.animenu__toggle__bar {
display: block;
width: 20px; height: 2px;
background-color: #fff;
transition: .15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
&+.animenu__toggle__bar {
margin-top: 4px;
}
}
.animenu__toggle--active {
.animenu__toggle__bar {
margin: 0;
position: absolute;
&:nth-child(1) {
transform: rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: rotate(-45deg);
}
}
}
// Clear some defaults
.animenu {
display: block;
ul {
padding: 0;
list-style: none;
font: 0px 'Open Sans', Arial, Helvetica;
}
li, a {
display: inline-block;
font-size: 15px;
}
a {
color: lighten($baseMenuBackground, 60%);
text-decoration: none;
}
}
// First level -> main menu items
// <nav class="animenu">
// <ul class="animenu__nav">
// ...
// </ul>
// </nav>
.animenu__nav {
background-color: $baseMenuBackground;
> li {
position: relative;
border-right: 1px solid lighten($baseMenuBackground, 20%);
> a {
padding: $gutter 3 * $gutter;
text-transform: uppercase;
&:first-child:nth-last-child(2):before {
content:"";
position: absolute;
border: 4px solid transparent;
border-bottom: 0;
border-top-color: currentColor;
top: 50%;
margin-top: -2px;
right: 10px;
}
}
&:hover {
> ul {
opacity: 1;
visibility: visible;
margin: 0;
}
> a {
color: #fff;
}
}
}
}
// Second level
// <nav class="animenu">
// <ul class="animenu__nav">
// <li>
// <ul class="animenu__nav__child"></ul>
// </li>
// </ul>
// </nav>
.animenu__nav__child {
min-width: 100%;
position: absolute;
top: 100%; left: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
margin: 2 * $gutter 0 0 0;
background-color: lighten($baseMenuBackground, 15%);
transition: margin .15s, opacity .15s;
> li {
width: 100%;
border-bottom: 1px solid lighten($baseMenuBackground, 25%);
&:first-child > a:after {
content: '';
position: absolute;
height: 0; width: 0;
left: 1em;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
}
&:last-child {
border: 0;
}
}
a {
padding: $gutter;
width: 100%;
border-color: lighten($baseMenuBackground, 15%);
&:hover {
background-color: $secondaryMenuBackground;
border-color: $secondaryMenuBackground;
color: #fff;
}
}
}
// The main breakpoint is 767px
// Adjust the first and second levels display
@media screen and (max-width: 767px) {
.animenu__toggle {
display: inline-block;
}
.animenu__nav,
.animenu__nav__child {
display: none;
}
// First level -> main menu items
// <nav class="animenu">
// <ul class="animenu__nav">
// ...
// </ul>
// </nav>
.animenu__nav {
margin: $gutter 0;
> li {
width: 100%;
border-right: 0;
border-bottom: 1px solid lighten($baseMenuBackground, 25%);
&:last-child {
border: 0;
}
&:first-child > a:after {
content: '';
position: absolute;
height: 0; width: 0;
left: 1em;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
}
> a {
width: 100%;
padding: $gutter;
border-color: $baseMenuBackground;
position: relative; //dropdown caret
}
}
a:hover {
background-color: $secondaryMenuBackground;
border-color: $secondaryMenuBackground;
color: #fff;
}
}
// Second level
// <nav class="animenu">
// <ul class="animenu__nav">
// <li>
// <ul class="animenu__nav__child"></ul>
// </li>
// </ul>
// </nav>
.animenu__nav__child {
position: static;
background-color: lighten($baseMenuBackground, 15%);
margin: 0;
transition: none;
visibility: visible;
opacity: 1;
> li:first-child > a:after {
content: none;
}
a {
padding-left: 2 * $gutter;
width: 100%;
}
}
}
// Expanding the animenu
// <nav class="animenu">
// <ul class="animenu__nav animenu__nav--open">
// <li>
// <ul class="animenu__nav__child"></ul>
// </li>
// </ul>
// </nav>
.animenu__nav--open {
display: block !important;
& .animenu__nav__child {
display: block;
}
}
.JS
// CSS3 animated & responsive dropdown menu
// Latest version: https://github.com/catalinred/Animenu
(function(){
var animenuToggle = document.querySelector('.animenu__toggle'),
animenuNav = document.querySelector('.animenu__nav'),
hasClass = function(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
},
toggleClass = function(elem, className) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
if(hasClass(elem, className)) {
while(newClass.indexOf(' ' + className + ' ') >= 0) {
newClass = newClass.replace(' ' + className + ' ' , ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
} else {
elem.className += ' ' + className;
}
},
animenuToggleNav = function(){
toggleClass(animenuToggle, "animenu__toggle--active");
toggleClass(animenuNav, "animenu__nav--open");
}
if (!animenuToggle.addEventListener) {
animenuToggle.attachEvent("onclick", animenuToggleNav);
}
else {
animenuToggle.addEventListener('click', animenuToggleNav);
}
})()
任意の助けいただければ幸い、事前に感謝します！
基本的には、ページのサイズを変更するとどうなりますか。
それに対応していないのは何ですか？ [このFiddle]（https://fiddle.jshell.net/40rwzts9/show/light/）に同じ問題はありませんか？ –
はい、あります。私が理解していないことは、ページのサイズを変更するとボックスの連絡先がロゴボタンの下などになる理由です。 – DAN