个人中心
gpt4 book ai didi

jquery - 调整浏览器大小时的菜单按钮

转载 作者：太空宇宙 更新时间：2023-11-04 12:07:00 25 4
gpt4 key购买 nike

我的网站只有 CSS 和 HTML，请告诉我是否需要 jQuery 或其他...所以，我一直在尝试将标题更改为一个按钮，您可以单击该按钮并使其垂直列表，这里很好example .当浏览器全尺寸时，标题是垂直的，但当它最小化时，标题变成一个按钮(在 example 的右上角。)点击时，变成一个垂直列表。这是我的代码:

(仅 body )

<body>
<div class="mainHeader">

    <div class="container">

        <div class="logo">
            <a href="#"><img src="Images/banner.png" width="300" height="100"></a>
        </div>

        <div class="nav">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Roster</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Our Sponsors</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>

    </div>

</div>

和CSS:

/*============================
======= Imported Fonts======== 
============================*/

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/*=========================
======= Body style ======== 
=========================*/

 body {
  color: #000305;
  font-size: 110%; /* Base font size: 14px */
  font-family: 'Montserrat', serif;
  line-height: 1.5;
  margin: 0 auto;
  padding: 0;
  left: 50%, margin-left: -(width of element/2);
  width: 100%;
}

/*=====================
======= Header ======== 
=====================*/

.mainHeader {
  background: #02236a;
  width: 100%;
  height: auto;
  top: 0;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  margin: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.nav {
  float: right;
}

.logo {
  float: left;
}

    /*========================
    ======= Underline ======== 
    ========================*/

    .nav ul li {
      position: relative;
      color: #000;
      text-decoration: none;
      float: left;
      margin-right: 75px;
      margin-left: 55px;
      padding-top: 25px;
    }

    .nav ul li:hover {
      color: #000;
    }

    .nav ul li:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #fff;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    .nav ul li:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

    .nav ul li a {
      text-decoration: none;
      color: #fff;
    }

/*============================
======= Miscellaneous ======== 
============================*/

a {
    text-decoration: none;
}

li {
    list-style: none;
}

请询问是否需要更多信息，谢谢。

最佳答案

我已经使用下面的代码来添加与您所要求的相同的功能，它可能对您有所帮助。你必须使用带有最新 jquery 的 javascript fisrt 将 id 添加到你的导航 div

 <div class="nav" id="navbar>
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Roster</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Our Sponsors</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>

添加CSS

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #nav {
    width: 100%;
}
#nav #menu-button {
    display: block;
    padding: 20px;
    color: #000000;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
}
#nav #menu-button::after {
    content:'';
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 15px;
    height: 2px;
    background: #000000;
}
#nav #menu-button::before {
    content:'';
    position: absolute;
    top: 25px;
    right: 20px;
    display: block;
    width: 15px;
    height: 3px;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

并添加javascript

(function ($) {

$.fn.menumaker = function (options) {

    var nav = $(this),
        settings = $.extend({
            title: "Menu",
            format: "dropdown",
            sticky: false
        }, options);

    return this.each(function () {
        nav.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function () {
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
                mainmenu.hide().removeClass('open');
            } else {
                mainmenu.show().addClass('open');
                if (settings.format === "dropdown") {
                    mainmenu.find('ul').show();
                }
            }
        });

        nav.find('li ul').parent().addClass('has-sub');

        multiTg = function () {
            nav.find(".has-sub").prepend('<span class="submenu-button"></span>');
            nav.find('.submenu-button').on('click', function () {
                $(this).toggleClass('submenu-opened');
                if ($(this).siblings('ul').hasClass('open')) {
                    $(this).siblings('ul').removeClass('open').hide();
                } else {
                    $(this).siblings('ul').addClass('open').show();
                }
            });
        };

        if (settings.format === 'multitoggle') multiTg();
        else nav.addClass('dropdown');

        if (settings.sticky === true) nav.css('position', 'fixed');

        resizeFix = function () {
            if ($(window).width() > 768) {
                nav.find('ul').show();
            }

            if ($(window).width() <= 768) {
                nav.find('ul').hide().removeClass('open');
            }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

    });
};
})(jQuery);

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

    $(document).ready(function () {
        $("#nav").menumaker({
            title: "Menu",
            format: "multitoggle"
        });

        $("#nav").prepend("<div id='menu-line'></div>");

        var foundActive = false,
            activeElement, linePosition = 0,
            menuLine = $("#nav #menu-line"),
            lineWidth, defaultPosition, defaultWidth;

        $("#nav > ul > li").each(function () {
            if ($(this).hasClass('active')) {
                activeElement = $(this);
                foundActive = true;
            }
        });

        if (foundActive === false) {
            activeElement = $("#nav > ul > li").first();
        }

        defaultWidth = lineWidth = activeElement.width();

        defaultPosition = linePosition = activeElement.position().left;

        menuLine.css("width", lineWidth);
        menuLine.css("left", linePosition);

        $("#nav > ul > li").hover(function () {
            activeElement = $(this);
            lineWidth = activeElement.width();
            linePosition = activeElement.position().left;
            menuLine.css("width", lineWidth);
            menuLine.css("left", linePosition);
        },

        function () {
            menuLine.css("left", defaultPosition);
            menuLine.css("width", defaultWidth);
        });

    });


});
})(jQuery);

关于jquery - 调整浏览器大小时的菜单按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29315806/

25 4 0
文章推荐： java - 如何使用正则表达式在句子之间添加文本？
文章推荐： c++ - 读者作家 - 作家线程总是卡在多个读者线程中
文章推荐： Controller 之间的javafx通信
文章推荐： c++ - 在 C++ 计算器中使用模板
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com