Question

好吧，所以my site有底部菜单（小灰色加号），我希望将菜单中从垂直方向下降到水平方向的对象方向改变。有人告诉我，我需要编辑toggle.js文件中的一些部分，如下所示。另外，如果有人对如何制作这个以及我前面提到过的更深的想法有任何想法，那也会很棒。

jQuery( document ).ready( function( $ ) {

// Submenu highlighting
$("ul.sub-menu").closest("li").addClass('parent');
$(".main-navigation ul.children").closest("li").addClass('parent');

var $comments = $( '#content' );

// Toggle comments on
$( '.comments-link' ).unbind( 'click' ).click( function() {

    $( 'html,body' ).animate( { scrollTop: $( "#comments-toggle" ).offset().top },'slow' );
    $comments.find( '#comments' ).slideToggle( 'ease' );
    $( this ).toggleClass( 'toggled-on' );

} );

var $sidebar = $( '#main' );

// Toggle sidebar on
$( '.sidebar-link' ).unbind( 'click' ).click( function() {
    $( 'html,body' ).animate( { scrollTop: $( "#secondary" ).offset().top },'slow' );
    $sidebar.find( '#secondary' ).slideToggle( 'ease' );
    $( this ).toggleClass( 'toggled-on' );

} );

//Toggle the the main navigation menu for small screens.
var $masthead = $( '#masthead' ),
    timeout = false;

$.fn.smallMenu = function() {
    $masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
    $masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

    $( '.menu-toggle' ).unbind( 'click' ).click( function() {
        $masthead.find( '.menu' ).slideToggle( 'ease' );
        $( this ).toggleClass( 'toggled-on' );
    } );
};

// Check viewport width on first load.
if ( $( window ).width() < 600 )
    $.fn.smallMenu();

// Check viewport width when user resizes the browser window.
$( window ).resize( function() {
    var browserWidth = $( window ).width();

    if ( false !== timeout )
        clearTimeout( timeout );

    timeout = setTimeout( function() {
        if ( browserWidth < 600 ) {
            $.fn.smallMenu();
        } else {
            $masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
            $masthead.find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
            $masthead.find( '.menu' ).removeAttr( 'style' );
        }
    }, 200 );
} );

}）;

这是页面CSS的小部件：

/* =Widgets
----------------------------------------------- */

.sidebar-link {
background: #fafafa;
border-radius: 40px;
clear: both;
color: #ddd;
cursor: pointer;
display: block;
font-size: 18px;
font-size: 1.8rem;
line-height: 40px;
margin: 2em auto 0;
text-align: center;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
width: 40px;
height: 40px;
}
.sidebar-link:hover {
background-color: #444;
color: #969696;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
.widget {
font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 100;
margin: 0 0 3em;
word-break: break-word;
}
.widget-column {
width: 100%;
}
.widget-title {
font-size: 24px;
font-size: 2.4rem;
margin: 0 0 .5em 0;
}
.one.widget-column {
float: none;
margin: 0 33%;
}
.two.widget-column {
float: left;
margin: 0 13.5%;
}
.three.widget-column {
float: left;
margin: 0 5%;
}

Answer 1

我认为您不需要编辑任何JavaScript。只需修改该菜单的CSS即可。这是一个起点：

#secondary .widget-column {
    width: 100%;
}

#secondary .widget {
    width: 33%;
    float: left;
}

将下拉菜单中对象的方向从垂直更改为水平？

1 个答案: