1

好的，所以我的网站有底部菜单（灰色的小加号），我希望将从菜单中下拉的对象的方向从垂直更改为水平。有人告诉我，我需要编辑 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%;
}
4

1 回答 1

0

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

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

#secondary .widget {
    width: 33%;
    float: left;
}
于 2013-04-19T17:14:38.760 回答