Question

我尝试将我的第一个Wordpress主题从0开始到最后。

我们的想法是创建一个移动样式菜单，但也可以在桌面上显示。

我已经使用jquery创建它以应用幻灯片效果。这是您可以查看和检查代码的网站（直到Wordpress网站我无法复制并粘贴所有代码）。 http://www.wolftrick.it/AREATEST/fripp/

我遇到的问题是菜单不适合页面的高度。我尝试了很多不同的css代码（绝对/固定位置，不同的显示选项），但我无法获得目标。

如果页面的高度比菜单的高度短，我也会尝试滚动菜单。

如果需要达到结果，我可以更改html结构。

我复制并粘贴了有关标题的部分代码。

如果需要达到结果，我可以更改html结构。

我复制并粘贴有关标题的部分代码。

Jquery的

jQuery.noConflict()(function($){
    'use strict';

    $(document).ready(function(){
        $(window).resize(function(){
            var winh = $(window).height();
            $('#wrap_all').css('min-height', winh);
            $('.menulist').css('min-height', winh);
        }).resize();
    });



    /* Slide menu function */
    $('#menu-btn').click(function() {
        var left = $('#wrap_site').css('left');
        var width = $('.menulist').css('width');
        if ((left == '0px') || (left == 'auto')) {
            $('.menulist').toggleClass('noshadow shadow');
            $('#wrap_site').animate({ left: width }, { duration: 600, easing: 'easeInOutQuad',});
        }else{
            $('.menulist').toggleClass('shadow noshadow');
            $('#wrap_site').animate({ left: '0' }, { duration: 600, easing: 'easeInOutQuad',});
        }
    });


});

CSS

html {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
body{
    font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    background-color: #f3f3f3;
    color: #555;
}
button::-moz-focus-inner {
  border: 0;
}
#wrap_all {
    margin: 0 8%;
    overflow: hidden;
}
#wrap_site {
    position: relative;
}
header {
    background-color: #fff;
    height: 180px;
    box-shadow: 0px 5px 0px rgba(0,0,0,0.15);
    z-index: 9999;
    position: relative;
}

HTML

<body class="home">

    <div id="wrap_all" class="container-fluid">

        <div id="wrap_site">

            <header class="row">

                <div id="menu">
                    <a id="menu-btn" href="#">
                        <i class="icon icon-menu"></i>
                    </a>
                </div>

                <div id="logo">
                    <a href="<?php echo esc_url( home_url('/') ); ?>" title="<?php echo esc_attr( get_bloginfo('name', 'display') ); ?>" rel="home">
                        <img src="<?php echo esc_url(get_theme_mod('logo_fripp')); ?>">
                    </a>
                </div>

                <div id="login">
                    <a id="login-btn" href="#">
                        <i class="icon icon-login-open"></i>
                    </a>
                </div>

                <nav id="navbar">
                    <div class="nav menulist noshadow">
                        <h2 class="menu-title"><?php _e('Menu', 'fripplng'); ?></h2>
                        <div class="subtitle green"><?php _e('Where the travel begin', 'fripplng') ?></div>
                        <i class="iconmenutop icon-compass"></i>
                        <?php
                        $menu = array(
                            'theme_location'=>  'main',
                            'menu_class'    =>  'navmenu',
                        );
                        wp_nav_menu($menu);
                        ?>
                    </div>
                </nav>

            </header>

感谢您的帮助！

Answer 1

而不是使用@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.order_details); listView = (ListView) findViewById(R.id.contactlist); db = new PhoneBookHandler(this); contactList = db.getAllContacts(); adapter = new PhonebookAdapter(this, contactList); eAddress = (EditText) findViewById(R.id.address); eTotalCost = (EditText) findViewById(R.id.orderTotal); eAmountReceived = (EditText) findViewById(R.id.amountReceived); eTip = (EditText) findViewById(R.id.tip); eMileage = (EditText) findViewById(R.id.mileage); eGrandTotal = (EditText) findViewById(R.id.grandTotal); eMilesDriven = (EditText) findViewById(R.id.milesDriven); // use shared preferences to inflate mileage edittext with data entered in settings menu ratePerDelivery = PreferenceManager.getDefaultSharedPreferences(this).getString("ratePerDeliveryPref", null); ratePerMile = PreferenceManager.getDefaultSharedPreferences(this).getString("ratePerMilePref", null); eAmountReceived.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after){} @Override public void onTextChanged(CharSequence s, int start, int before, int count){} @Override public void afterTextChanged(Editable s) { if (getCurrentFocus() == eAmountReceived) { sAmountReceived = eAmountReceived.getText().toString(); sTotalCost = eTotalCost.getText().toString(); sMileage = eMileage.getText().toString(); sTip = eTip.getText().toString(); try { dAmountReceived = Double.parseDouble(sAmountReceived); dTotalCost = Double.parseDouble(sTotalCost); dSubtract = dAmountReceived - dTotalCost; dMileage = Double.parseDouble(sMileage); dGrandTotal = dSubtract + dMileage; } catch(NumberFormatException e){} sTip = String.valueOf(dSubtract); DecimalFormat df = new DecimalFormat("0.00"); sTip = df.format(dSubtract); eTip.setText(sTip); sGrandTotal = String.valueOf(dGrandTotal); sGrandTotal = df.format(dGrandTotal); eGrandTotal.setText(sGrandTotal); } } }); eTip.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after){} @Override public void onTextChanged(CharSequence s, int start, int before, int count){} @Override public void afterTextChanged(Editable s) { if (getCurrentFocus() == eTip) { sAmountReceived = eAmountReceived.getText().toString(); sTotalCost = eTotalCost.getText().toString(); sMileage = eMileage.getText().toString(); sTip = eTip.getText().toString(); try { dTip = Double.parseDouble(sTip); dTotalCost = Double.parseDouble(sTotalCost); dAdd = dTotalCost + dTip; dMileage = Double.parseDouble(sMileage); dGrandTotal = dTip + dMileage; } catch (NumberFormatException e) { } sAmountReceived = String.valueOf(dAdd); DecimalFormat df = new DecimalFormat("0.00"); sAmountReceived = df.format(dAdd); eAmountReceived.setText(sAmountReceived); sGrandTotal = String.valueOf(dGrandTotal); sGrandTotal = df.format(dGrandTotal); eGrandTotal.setText(sGrandTotal); } } }); if (ratePerMile.equals("") && !ratePerDelivery.equals("")) { eMileage.setText(ratePerDelivery); } else { eMilesDriven.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after){} @Override public void onTextChanged(CharSequence s, int start, int before, int count){} @Override public void afterTextChanged(Editable s) { if (getCurrentFocus() == eMilesDriven) { sAmountReceived = eAmountReceived.getText().toString(); sTotalCost = eTotalCost.getText().toString(); sMileage = eMileage.getText().toString(); sTip = eTip.getText().toString(); try { milesDriven = eMilesDriven.getText().toString(); dMilesDriven = Double.parseDouble(milesDriven); dRatePerMile = Double.parseDouble(ratePerMile); dMultiply = dRatePerMile * dMilesDriven; dGrandTotal = dTip + dMultiply; } catch(NumberFormatException e){} sMileage = String.valueOf(dMultiply); DecimalFormat df = new DecimalFormat("0.00"); sMileage = df.format(dMultiply); eMileage.setText(sMileage); sGrandTotal = String.valueOf(dGrandTotal); sGrandTotal = df.format(dGrandTotal); eGrandTotal.setText(sGrandTotal); } } }); } }，请使用$(window).height()获取当前桌面高度。

window.innerHeight获取桌面宽度。

如果您的目标类似于此http://www.wolftrick.it/AREATEST/fripp/，只需将菜单位置设置为固定，然后使用window.innerWidth自动设置高度。

可以说，你的菜单宽度是300px？单击菜单图标时，添加300px左侧的填充，然后从左向右滑动菜单。

如果你添加填充量300px，我确定你的内容会有问题。将window.innerHeight添加到内容拥有者，然后添加css window.innerWidth。

希望这会对你有所帮助。

如果您需要插件，请检查WDES Responsive Mobile Menu。

菜单移动风格，但也在桌面全高

1 个答案: