/* global ethemeScreenReaderText */
/**
* Theme functions file.
*
* Contains handlers for navigation and widget area.
*/
(function( $ ) {
var masthead, menuToggle, siteNavigation;
function initMainNavigation( container ) {
// Add dropdown toggle that displays child menu items.
var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
.append( $( '<span />', { 'class': 'dropdown-symbol', text: '+' }) )
.append( $( '<span />', { 'class': 'screen-reader-text', text: ethemeScreenReaderText.expand }) );
container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this ),
screenReaderSpan = _this.find( '.screen-reader-text' );
dropdownSymbol = _this.find( '.dropdown-symbol' );
dropdownSymbol.text( dropdownSymbol.text() === '-' ? '+' : '-');
e.preventDefault();
_this.toggleClass( 'toggled-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
screenReaderSpan.text( screenReaderSpan.text() === ethemeScreenReaderText.expand ? ethemeScreenReaderText.collapse : ethemeScreenReaderText.expand );
});
}
initMainNavigation( $( '.main-navigation' ) );
masthead = $( '#masthead' );
menuToggle = masthead.find( '.menu-toggle' );
siteNavigation = masthead.find( '.main-navigation > div > ul' );
// Enable menuToggle.
(function() {
// Return early if menuToggle is missing.
if ( ! menuToggle.length ) {
return;
}
// Add an initial values for the attribute.
menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' );
menuToggle.on( 'click.etheme', function() {
$( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' );
$( this )
.add( siteNavigation )
.attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
});
})();
// Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
(function() {
if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
return;
}
// Toggle `focus` class to allow submenu access on tablets.
function toggleFocusClassTouchScreen() {
if ( 'none' === $( '.menu-toggle' ).css( 'display' ) ) {
$( document.body ).on( 'touchstart.etheme', function( e ) {
if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
$( '.main-navigation li' ).removeClass( 'focus' );
}
});
siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
.on( 'touchstart.etheme', function( e ) {
var el = $( this ).parent( 'li' );
if ( ! el.hasClass( 'focus' ) ) {
e.preventDefault();
el.toggleClass( 'focus' );
el.siblings( '.focus' ).removeClass( 'focus' );
}
});
} else {
siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart.etheme' );
}
}
if ( 'ontouchstart' in window ) {
$( window ).on( 'resize.etheme', toggleFocusClassTouchScreen );
toggleFocusClassTouchScreen();
}
siteNavigation.find( 'a' ).on( 'focus.etheme blur.etheme', function() {
$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
});
})();
// Add the default ARIA attributes for the menu toggle and the navigations.
function onResizeARIA() {
if ( 'block' === $( '.menu-toggle' ).css( 'display' ) ) {
if ( menuToggle.hasClass( 'toggled-on' ) ) {
menuToggle.attr( 'aria-expanded', 'true' );
} else {
menuToggle.attr( 'aria-expanded', 'false' );
}
if ( siteNavigation.closest( '.main-navigation' ).hasClass( 'toggled-on' ) ) {
siteNavigation.attr( 'aria-expanded', 'true' );
} else {
siteNavigation.attr( 'aria-expanded', 'false' );
}
} else {
menuToggle.removeAttr( 'aria-expanded' );
siteNavigation.removeAttr( 'aria-expanded' );
menuToggle.removeAttr( 'aria-controls' );
}
}
$( document ).ready( function() {
$( window ).on( 'load.etheme', onResizeARIA );
$( window ).on( 'resize.etheme', onResizeARIA );
});
})( jQuery );/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/*c */
.main-navigation {
display: block;
clear: left;
background-color: #fff;
/* background-color: #28406d;
*/ }
.dropdown-symbol {
color: black;
}
@media screen and (max-width: 601px) {
/* .main-navigation {
margin-top: 40px;
}*/
.main-navigation li a {
padding:1rem;
border-bottom: 1px solid black;
}
}
@media screen and (max-width: 729px) {
.menu-primar-container {
background-color: #28406d;
position: relative;
top: 29px;
padding: 1rem;
}
.main-navigation > a {
border-bottom: 1px solid #f8f8f8;
color:#fff;
}
.site-branding {
position: relative;
width: 50%;
/*left: 30px;*/
}
}
@media only screen and (max-width: 902px) and (min-width: 603px) {
.main-navigation {
position: absolute;
top: 80px;
left: 0;
width: 100%;
}
}
/*@media screen and (max-width: 902px) {
.main-navigation {
position: absolute;
top: 109px;
left: 0;
width: 100%;
}
}
*/
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-top: 1em;
padding-left: 0;
}
.main-navigation ul ul {
display: none;
top: 1.5em;
z-index: 99999;
}
.main-navigation ul ul ul {
top: 0;
}
.main-navigation ul ul li {
padding-left: 1em;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li:focus > ul {
left: 100%;
top:0;
}
.main-navigation ul ul a {
/*width: 200px;*/
border-bottom: 2px solid green;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: inline-block;
width: 100%;
padding: .5em 1em .5em 0;
text-decoration: none;
color: black;
font-size: 1.1rem;
font-weight: bolder;
border-bottom: 3px #a7db51 solid;
}
.main-navigation a:hover,
.main-navigation a:focus {
text-decoration: underline;
}
.main-navigation .menu-item-has-children,
.main-navigation .page_item_has_children {
min-width: 218px;
}
.main-navigation .menu-item-has-children > a,
.main-navigation .page_item_has_children > a {
padding-right: 2em;
}
button.dropdown-toggle {
position: absolute;
right: 0;
border: none;
background: inherit;
color: white;
line-height: 1.5em;
padding: .4em 1em .4em .5em;
}
/* Burger Nav */
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
cursor: pointer;
margin:6px;
position: relative;
top: 0px;
}
#sidebar-btn span {
height: 2px;
background: black;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
.menu-toggle {
z-index: 11;
position: absolute;
top: 0;
right: 0;
display: block;
margin: 1.8rem;
background-color: white;
/* padding: .6em .8em;
*/ font-size: 80%;
text-transform: uppercase;
/* color: white;
*/
/* border: 1px solid rgba(255, 255, 255, 0.3);
*/}
/* Toggle small menu and children on */
.toggled-on ul,
.sub-menu.toggled-on {
display: block;
}
@media screen and (min-width: 601px) {
.menu-toggle {
display: none;
}
.main-navigation .menu-item-has-children > a,
.main-navigation .page_item_has_children > a {
padding-right: 2em;
background: rgba(255, 255, 255, 0.1);
}
.main-navigation ul {
display: block;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.main-navigation ul ul {
flex-direction: column;
position: absolute;
background-color: white;
top: 43px;
/*background: rgba(255, 255, 255, 0.1);*/
margin-left: 0;
}
.main-navigation ul ul li {
padding-left: 0;
}
.main-navigation ul ul li a {
width: 218px;
/*background: none;*/
}
.main-navigation ul li a {
padding: .4em 1em;
}
}
/* CONTROL SUB MENU ON HOVER DISPLAY */
/*.menu-item-has-children .sub-menu {
position: absolute;
display: none;
top: 3.5rem;
background-color: #28406d;
}
*/
@media screen and (min-width: 904px) {
.main-navigation ul {
justify-content: flex-end;
padding-top: 0;
}
/* If you want dropdowns to open on hover, uncomment this: */
.main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation ul li:hover > ul {
position: absolute;
top: 44px;
z-index: 12;
display: block;
background-color: #fff;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle">
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</button>
<div class="menu-test-container"><ul id="primary-menu" class="menu"><li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035"><a href="http://localhost/wordpress/services/">Services</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2076"><a href="http://localhost/wordpress/asd/">Commercial</a></li>
<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2079"><a href="http://localhost/wordpress/gallery/">Residential</a></li>
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2082"><a href="http://localhost/wordpress/asd/">Rural</a></li>
<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2081"><a href="http://localhost/wordpress/services/">Electrical</a></li>
<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
</ul>
</li>
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2078"><a href="http://localhost/wordpress/news-updates/">About</a></li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"><a href="http://localhost/wordpress/asd/">Projects</a></li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2045"><a href="http://localhost/wordpress/blog/">Blog</a></li>
</ul></div> </nav>
所以我想为我的导航栏项添加一个下拉图标。
目前：目前它正在显示字符＆＃39; +＆＃39;和＆＃39; - ＆＃39;什么时候 菜单打开/关闭。
问题：我正在使用dropdownSymbol.text( dropdownSymbol.text() === '-' ? '+' : '-');
问题：我不确定如何替换＆＃39; +＆＃39; /＆＃39; - ＆＃39;的图像图标。我试图在那里添加图片标记，但它不起作用。
NAV.JS
(function( $ ) {
var masthead, menuToggle, siteNavigation;
function initMainNavigation( container ) {
// Add dropdown toggle that displays child menu items.
var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
.append( $( '<span />', { 'class': 'dropdown-symbol', text: '+' }) )
.append( $( '<span />', { 'class': 'screen-reader-text', text: ethemeScreenReaderText.expand }) );
container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this ),
screenReaderSpan = _this.find( '.screen-reader-text' );
dropdownSymbol = _this.find( '.dropdown-symbol' );
dropdownSymbol.text( dropdownSymbol.text() === '-' ? '+' : '-');
e.preventDefault();
_this.toggleClass( 'toggled-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
screenReaderSpan.text( screenReaderSpan.text() === ethemeScreenReaderText.expand ? ethemeScreenReaderText.collapse : ethemeScreenReaderText.expand );
});
}
initMainNavigation( $( '.main-navigation' ) );
masthead = $( '#masthead' );
menuToggle = masthead.find( '.menu-toggle' );
siteNavigation = masthead.find( '.main-navigation > div > ul' );
// Enable menuToggle.
(function() {
// Return early if menuToggle is missing.
if ( ! menuToggle.length ) {
return;
}
// Add an initial values for the attribute.
menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' );
menuToggle.on( 'click.etheme', function() {
$( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' );
$( this )
.add( siteNavigation )
.attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
});
})();
// Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
(function() {
if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
return;
}
// Toggle `focus` class to allow submenu access on tablets.
function toggleFocusClassTouchScreen() {
if ( 'none' === $( '.menu-toggle' ).css( 'display' ) ) {
$( document.body ).on( 'touchstart.etheme', function( e ) {
if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
$( '.main-navigation li' ).removeClass( 'focus' );
}
});
siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
.on( 'touchstart.etheme', function( e ) {
var el = $( this ).parent( 'li' );
if ( ! el.hasClass( 'focus' ) ) {
e.preventDefault();
el.toggleClass( 'focus' );
el.siblings( '.focus' ).removeClass( 'focus' );
}
});
} else {
siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart.etheme' );
}
}
if ( 'ontouchstart' in window ) {
$( window ).on( 'resize.etheme', toggleFocusClassTouchScreen );
toggleFocusClassTouchScreen();
}
siteNavigation.find( 'a' ).on( 'focus.etheme blur.etheme', function() {
$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
});
})();
// Add the default ARIA attributes for the menu toggle and the navigations.
function onResizeARIA() {
if ( 'block' === $( '.menu-toggle' ).css( 'display' ) ) {
if ( menuToggle.hasClass( 'toggled-on' ) ) {
menuToggle.attr( 'aria-expanded', 'true' );
} else {
menuToggle.attr( 'aria-expanded', 'false' );
}
if ( siteNavigation.closest( '.main-navigation' ).hasClass( 'toggled-on' ) ) {
siteNavigation.attr( 'aria-expanded', 'true' );
} else {
siteNavigation.attr( 'aria-expanded', 'false' );
}
} else {
menuToggle.removeAttr( 'aria-expanded' );
siteNavigation.removeAttr( 'aria-expanded' );
menuToggle.removeAttr( 'aria-controls' );
}
}
$( document ).ready( function() {
$( window ).on( 'load.etheme', onResizeARIA );
$( window ).on( 'resize.etheme', onResizeARIA );
});
})( jQuery );
HTML
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle">
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</button>
<div class="menu-test-container"><ul id="primary-menu" class="menu"><li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2009 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-2035"><a href="http://localhost/wordpress/services/">Services</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2076"><a href="http://localhost/wordpress/asd/">Commercial</a></li>
<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2079"><a href="http://localhost/wordpress/gallery/">Residential</a></li>
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2082"><a href="http://localhost/wordpress/asd/">Rural</a></li>
<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2009 current_page_item menu-item-2081"><a href="http://localhost/wordpress/services/">Electrical</a></li>
<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
</ul>
</li>
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2078"><a href="http://localhost/wordpress/news-updates/">About</a></li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"><a href="http://localhost/wordpress/asd/">Projects</a></li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2045"><a href="http://localhost/wordpress/blog/">Blog</a></li>
</ul></div></nav>