0
Bloggerにある自分のサイト（DIYブログ）用のモバイルレスポンシブルテンプレートの作成に取り組んでいます（私はプライベートブログを持ち、残念ながら私はあなたに正確なテンプレートを表示することはできません）、私のモバイルメニューにSlickNavを使用しています。上部に「スティッキー」メニューがあり、ヘッダーの下に追加のメニューがあります。トップメニューはうまく動作しますが、2番目のメニューにはモバイルと同時にデスクトップメニューとモバイルメニューの両方が表示されます。私が "display：none"に設定すると、デスクトップメニューの代わりに両方とも消えます。トップメニューはBloggerの「ページ」ウィジェットで、2番目のメニューはドロップダウンのhtml/cssメニューです。モバイルslicknavメニューを使用してデスクトップメニューを非表示にする方法
また、最初のメニュー項目はホバー上をジャンプします。
どのようにすればいいですか？a）モバイルでデスクトップバージョンを非表示にするb）ホバーでジャンプを修正しますか？
これは初めての投稿です。コーディング時のプロではないので、うまくいけばすべてを正しく共有しました。
/*!
SlickNav Responsive Mobile Menu
(c) 2014 Josh Cope
licensed under MIT
*/
;
(function(e, t, n) {
function o(t, n) {
this.element = t;
this.settings = e.extend({}, r, n);
this._defaults = r;
this._name = i;
this.init()
}
var r = {
label: "MENU",
duplicate: true,
duration: 200,
easingOpen: "swing",
easingClose: "swing",
closedSymbol: "►",
openedSymbol: "▼",
prependTo: "body",
parentTag: "a",
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
init: function() {},
open: function() {},
close: function() {}
},
i = "slicknav",
s = "slicknav";
o.prototype.init = function() {
var n = this;
var r = e(this.element);
var i = this.settings;
if (i.duplicate) {
n.mobileNav = r.clone();
n.mobileNav.removeAttr("id");
n.mobileNav.find("*").each(function(t, n) {
e(n).removeAttr("id")
})
} else n.mobileNav = r;
var o = s + "_icon";
if (i.label === "") {
o += " " + s + "_no-text"
}
if (i.parentTag == "a") {
i.parentTag = 'a href="#"'
}
n.mobileNav.attr("class", s + "_nav");
var u = e('<div class="' + s + '_menu"></div>');
n.btn = e("<" + i.parentTag + ' aria-haspopup="true" tabindex="0" class="' + s + "_btn " + s + '_collapsed"><span class="' + s + '_menutxt">' + i.label + '</span><span class="' + o + '"><span class="' + s + '_icon-bar"></span><span class="' + s + '_icon-bar"></span><span class="' + s + '_icon-bar"></span></span></a>');
e(u).append(n.btn);
e(i.prependTo).prepend(u);
u.append(n.mobileNav);
var a = n.mobileNav.find("li");
e(a).each(function() {
var t = e(this);
var r = {};
r.children = t.children("ul").attr("role", "menu");
t.data("menu", r);
if (r.children.length > 0) {
var o = t.contents();
var u = false;
var a = [];
e(o).each(function() {
if (!e(this).is("ul")) {
a.push(this)
} else {
return false
} if (e(this).is("a")) {
u = true
}
});
var f = e("<" + i.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + s + '_item"/>');
if (!i.allowParentLinks || i.nestedParentLinks || !u) {
var l = e(a).wrapAll(f).parent();
l.addClass(s + "_row")
} else e(a).wrapAll('<span class="' + s + "_parent-link " + s + '_row"/>').parent();
t.addClass(s + "_collapsed");
t.addClass(s + "_parent");
var c = e('<span class="' + s + '_arrow">' + i.closedSymbol + "</span>");
if (i.allowParentLinks && !i.nestedParentLinks && u) c = c.wrap(f).parent();
e(a).last().after(c)
} else if (t.children().length === 0) {
t.addClass(s + "_txtnode")
}
t.children("a").attr("role", "menuitem").click(function(t) {
if (i.closeOnClick && !e(t.target).parent().closest("li").hasClass(s + "_parent")) e(n.btn).click()
});
if (i.closeOnClick && i.allowParentLinks) {
t.children("a").children("a").click(function(t) {
e(n.btn).click()
});
t.find("." + s + "_parent-link a:not(." + s + "_item)").click(function(t) {
e(n.btn).click()
})
}
});
e(a).each(function() {
var t = e(this).data("menu");
if (!i.showChildren) {
n._visibilityToggle(t.children, null, false, null, true)
}
});
n._visibilityToggle(n.mobileNav, null, false, "init", true);
n.mobileNav.attr("role", "menu");
e(t).mousedown(function() {
n._outlines(false)
});
e(t).keyup(function() {
n._outlines(true)
});
e(n.btn).click(function(e) {
e.preventDefault();
n._menuToggle()
});
n.mobileNav.on("click", "." + s + "_item", function(t) {
t.preventDefault();
n._itemClick(e(this))
});
e(n.btn).keydown(function(e) {
var t = e || event;
if (t.keyCode == 13) {
e.preventDefault();
n._menuToggle()
}
});
n.mobileNav.on("keydown", "." + s + "_item", function(t) {
var r = t || event;
if (r.keyCode == 13) {
t.preventDefault();
n._itemClick(e(t.target))
}
});
if (i.allowParentLinks && i.nestedParentLinks) {
e("." + s + "_item a").click(function(e) {
e.stopImmediatePropagation()
})
}
};
o.prototype._menuToggle = function(e) {
var t = this;
var n = t.btn;
var r = t.mobileNav;
if (n.hasClass(s + "_collapsed")) {
n.removeClass(s + "_collapsed");
n.addClass(s + "_open")
} else {
n.removeClass(s + "_open");
n.addClass(s + "_collapsed")
}
n.addClass(s + "_animating");
t._visibilityToggle(r, n.parent(), true, n)
};
o.prototype._itemClick = function(e) {
var t = this;
var n = t.settings;
var r = e.data("menu");
if (!r) {
r = {};
r.arrow = e.children("." + s + "_arrow");
r.ul = e.next("ul");
r.parent = e.parent();
if (r.parent.hasClass(s + "_parent-link")) {
r.parent = e.parent().parent();
r.ul = e.parent().next("ul")
}
e.data("menu", r)
}
if (r.parent.hasClass(s + "_collapsed")) {
r.arrow.html(n.openedSymbol);
r.parent.removeClass(s + "_collapsed");
r.parent.addClass(s + "_open");
r.parent.addClass(s + "_animating");
t._visibilityToggle(r.ul, r.parent, true, e)
} else {
r.arrow.html(n.closedSymbol);
r.parent.addClass(s + "_collapsed");
r.parent.removeClass(s + "_open");
r.parent.addClass(s + "_animating");
t._visibilityToggle(r.ul, r.parent, true, e)
}
};
o.prototype._visibilityToggle = function(t, n, r, i, o) {
var u = this;
var a = u.settings;
var f = u._getActionItems(t);
var l = 0;
if (r) l = a.duration;
if (t.hasClass(s + "_hidden")) {
t.removeClass(s + "_hidden");
t.slideDown(l, a.easingOpen, function() {
e(i).removeClass(s + "_animating");
e(n).removeClass(s + "_animating");
if (!o) {
a.open(i)
}
});
t.attr("aria-hidden", "false");
f.attr("tabindex", "0");
u._setVisAttr(t, false)
} else {
t.addClass(s + "_hidden");
t.slideUp(l, this.settings.easingClose, function() {
t.attr("aria-hidden", "true");
f.attr("tabindex", "-1");
u._setVisAttr(t, true);
t.hide();
e(i).removeClass(s + "_animating");
e(n).removeClass(s + "_animating");
if (!o) a.close(i);
else if (i == "init") a.init()
})
}
};
o.prototype._setVisAttr = function(t, n) {
var r = this;
var i = t.children("li").children("ul").not("." + s + "_hidden");
if (!n) {
i.each(function() {
var t = e(this);
t.attr("aria-hidden", "false");
var i = r._getActionItems(t);
i.attr("tabindex", "0");
r._setVisAttr(t, n)
})
} else {
i.each(function() {
var t = e(this);
t.attr("aria-hidden", "true");
var i = r._getActionItems(t);
i.attr("tabindex", "-1");
r._setVisAttr(t, n)
})
}
};
o.prototype._getActionItems = function(e) {
var t = e.data("menu");
if (!t) {
t = {};
var n = e.children("li");
var r = n.find("a");
t.links = r.add(n.find("." + s + "_item"));
e.data("menu", t)
}
return t.links
};
o.prototype._outlines = function(t) {
if (!t) {
e("." + s + "_item, ." + s + "_btn").css("outline", "none")
} else {
e("." + s + "_item, ." + s + "_btn").css("outline", "")
}
};
o.prototype.toggle = function() {
var e = this;
e._menuToggle()
};
o.prototype.open = function() {
var e = this;
if (e.btn.hasClass(s + "_collapsed")) {
e._menuToggle()
}
};
o.prototype.close = function() {
var e = this;
if (e.btn.hasClass(s + "_open")) {
e._menuToggle()
}
};
e.fn[i] = function(t) {
var n = arguments;
if (t === undefined || typeof t === "object") {
return this.each(function() {
if (!e.data(this, "plugin_" + i)) {
e.data(this, "plugin_" + i, new o(this, t))
}
})
} else if (typeof t === "string" && t[0] !== "_" && t !== "init") {
var r;
this.each(function() {
var s = e.data(this, "plugin_" + i);
if (s instanceof o && typeof s[t] === "function") {
r = s[t].apply(s, Array.prototype.slice.call(n, 1))
}
});
return r !== undefined ? r : this
}
}
})(jQuery, document, window)
//]]></script>
< script type = 'text/javascript' > //<![CDATA[
jQuery(document).ready(function($) {
"use strict";
$('#top-search a').on('click', function(e) {
e.preventDefault();
$('.show-search').slideToggle('fast');
});
$('.to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
$('.bxslider').bxSlider({
adaptiveHeight: true,
mode: 'fade',
pager: false,
captions: true
});
$(document).ready(function() {
$(".container").fitVids();
});
$('.menu').slicknav({
prependTo: '.menu-mobile',
label: ''
});
$('#dropdownmenu').slicknav({
prependTo: '#dropdown'
});
});
$('.separator').css('float', '');
$('.separator,.separator a').css('margin-left', '').css('margin-right', '').css('margin-bottom', '');
//]]></script>/********************************/
/*** Navigation ***/
/********************************/
#dropdownmenu {
background-color: #ffffff;
width: 100%;
color: #009999;
letter-spacing: 2px;
font-size: 14px;
margin: 0px;
padding: 10px 0 0 0;
position: relative;
height: 45px;
border-top: 1px solid #009999;
border-bottom: 1px solid #009999;
}
#dropdown {
display: inline-block;
text-align: center;
margin: 0px;
padding: 0px;
}
#dropdown ul {
overflow: hidden;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
border: 1px solid #f3f2ee;
}
#dropdown li {
list-style: none;
margin: 0px;
padding: 0px;
border-left: 0px solid #009999;
border-right: 0px solid #009999;
height: auto;
}
#dropdown li a,
#dropdown li a:link,
#dropdown li a:visited {
color: #009999;
display: inline-block;
font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0px 0px 0px 0px;
padding: 9px 5px 10px 0px;
text-decoration: none;
}
#dropdown li a:hover,
#dropdown li a:active {
background: #ffffff;
color: #c6c1ae;
display: block;
text-decoration: none;
padding: 9px 5px 10px 0px;
}
#dropdown li {
float: left;
padding: 0px 66px;
}
#dropdown li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 220px;
margin: 0;
padding: 0px;
}
#dropdown li ul a {
width: 220px;
}
#dropdown li ul ul {
margin: 0px 0 0 0px;
}
#dropdown li:hover ul ul,
#dropdown li:hover ul ul ul,
#dropdown li.sfhover ul ul,
#dropdown li.sfhover ul ul ul {
left: -999em;
}
#dropdown li:hover ul,
#dropdown li li:hover ul,
#dropdown li li li:hover ul,
#dropdown li.sfhover ul,
#dropdown li li.sfhover ul,
#dropdown li li li.sfhover ul {
left: auto;
}
#dropdown li:hover,
#dropdown li.sfhover {
position: static;
}
#dropdown li li a,
#dropdown li li a:link,
#dropdown li li a:visited {
background: #ffffff;
width: 130px;
text-align: left;
color: #009999;
display: block;
font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index: 9999;
border-bottom: 0px solid #009999;
}
#dropdown li li a:hover,
#dropdown li li a:active {
background: #ffffff;
color: #c6c1ae;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#navigation {
background: #F1F1F1;
height: 55px;
position: fixed;
z-index: 999;
width: 100%;
-webkit-backface-visibility: hidden;
border-bottom: 1px solid #F0F0F0;
}
.slicknav_menu {
display: none;
}
#navigation .container {
position: relative;
}
.menu {
float: left;
}
.menu li {
display: inline-block;
margin-right: 12px;
position: relative;
}
.menu li a {
font: $(navbar.text.font);
font-weight: 400;
letter-spacing: 2px;
color: $(navbar.text.color);
line-height: 55px;
text-transform: uppercase;
display: inline-block;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
ul.sub-menu li:after {
content: "|";
padding-left: 10px;
color: #565656;
display: none;
}
@media only screen and (max-width: 767px) {
/* second slicknav dropdown menu */
#dropdown .slicknav_menu {
width: 100%;
text-align: center;
display: block;
background: #ffffff;
border-top: 1px solid #009999;
border-bottom: 1px solid #009999;
}
#dropdown .slicknav_btn {
display: inline-block;
float: none;
text-align: center;
}
#dropdown .slicknav_menu ul {
float: left;
text-align: left;
}
.subscribe-box .block,
.container {
width: 320px;
}
#navigation-wrapper {
display: none;
}
.slicknav_menu {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='navigation'>
<div class='container'>
<b:section id='navigation-wrapper' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content menu'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + "_select"'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'>
<data:link.title/>
</option>
<b:else/>
<option expr:value='data:link.href'>
<data:link.title/>
</option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&#9660;</span>
<b:else/>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'>
<a expr:href='data:link.href'>
<data:link.title/>
</a>
</li>
<b:else/>
<li>
<a expr:href='data:link.href'>
<data:link.title/>
</a>
</li>
</b:if>
</b:loop>
</ul>
</b:if>
<b:include name='quickedit' />
</div>
</b:includable>
</b:widget>
</b:section>
<center>
<!-- start dropdown -->
<div id="dropdownmenu">
<ul id="dropdown">
<a class="menuDrop">
<li><a href="/">START HERE</a>
</li>
<li><a href="#">
DIY</a>
<ul>
<li><a href="http://www.theinspiredhive.com/p/diy.html">Project Gallery</a>
</li>
<li><a href="http://www.theinspiredhive.com/p/monthly-diy-challenge.html">Monthly DIY Challenge</a>
</li>
<li><a href="/search/label/round%20up">Baby</a>
</li>
<li><a href="#">Wedding Crafts</a>
</li>
</ul>
</li>
<li><a href="http://www.theinspiredhive.com/p/home-tour.html">HOME TOUR</a>
</li>
<li><a href="#">
POPULAR POSTS</a>
<ul>
<li><a href="http://www.theinspiredhive.com/p/about.html">Meet The B's</a>
</li>
<li><a href="/search/label/baby">Pregnancy & Baby</a>
</li>
<li><a href="http://www.theinspiredhive.com/p/our-wedding.html">Wedding</a>
</li>
</ul>
</li>
<li><a href="http://www.theinspiredhive.com/p/home-tour.html">BLOGGING RESOURCES</a>
</li>
</a>
</ul>
</div>
<!-- end dropdown -->
</center>
こんにちは！ご協力いただきありがとうございます！メニューは現在のようにうまくいきます。私の質問は、モバイルでデスクトップメニューを隠す方法です。現在、私にはモバイルメニューボタンがありますが、モバイルボタンの下にデスクトップドロップダウンも表示されます。それは本当に乱雑に見えます。 –
これは私がSlickNavのウェブサイトで見つけたものですが、元のメニューだけでなく、両方のメニューも隠しています： 'code' .slicknav_menu { \t display：none; } @media画面と（最大幅：40em）#dropdownmenu { \t \tが表示{ \t/* #dropdownmenuが元のメニューである*/ \tの.js：なし。 \t} \t \tの.js .slicknav_menu { \t \t表示：ブロック; \t} } –
私のコードをメディアでチェックしてください。最初のメニューと第2のメニューのIDは何ですか –