js和CSS3媒體查詢製作簡單的響應式導航選單

东绕城發表於2024-11-29
JSCSSS3

這是一款使用純js和css3媒體查詢製作的簡單的響應式導航選單效果。該導航選單類似bootstrap導航選單，它透過media query製作760畫素斷點，當視口小於760畫素時，選單會收縮為隱藏的漢堡包選單。

線上演示 下載

使用方法

HTML結構

該導航選單使用<nav>元素最為包裹容器，div.menu_button_wrapper是漢堡包圖示，無序列表.menu_list是選單項。

<nav>
    <div id="menu_button_wrapper">
        <div id="menu_button">
            Menu  
            <div id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    
    <ul id="menu_list">
        <li class="current_page"><a href="#">Home</a></li>
        <li><a href="#">Audio</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>
CSS樣式

為導航選單新增一些必要的CSS樣式。

nav {
  font-family: Helvetica;
  text-align: right;
  text-transform: uppercase;
  background-color: #222;
}

nav ul {
  width: 90%;
  max-width: 1024px;
  margin: 0 auto;
  list-style-type: none;
}

nav ul li { display: inline-block; }

nav ul li a {
  color: #9d9d9d;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 1em;
  box-sizing: border-box;
}

nav ul li a:hover { color: white; }

.current_page { background-color: black; }

.current_page a { color: white; }

#menu_button_wrapper { display: none; }

.hidden { display: none; }

然後透過media query媒體查詢製作760畫素時的斷點。

@media (max-width: 760px) {

  #menu_button_wrapper {
    display: block;
    padding: 1em;
    color: #9d9d9d;
    border-bottom: 1px solid #101010;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);
    box-shadow: 0 1px 0 rgba(255,255,255,.1);
    margin-bottom: .5em;
  }

  #menu_button {
    box-sizing: border-box;
    float: right;
    padding: .5em 1em;
    border: 1px solid #333;
    border-radius: 5px;
    color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #menu_button:hover {
    cursor: pointer;
    background-color: #333;
  }

  #hamburger {
    float: right;
    padding-top: .15em;
  }

  #menu_button span {
    display: block;
    background-color: #fff;
    width: 1.2em;
    height: .15em;
    border-radius: 1px;
    margin-bottom: .2em;
  }

  nav ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  nav ul li { display: block; }

  nav ul li a { width: 100%; }
  
}
JavaScript

該導航選單透過JavaScript程式碼來監聽瀏覽器視窗的尺寸變化，為相應的選單元素新增和移除相應的class類。

function addListener(element, type, callback) {
    if (element.addEventListener) {
        element.addEventListener(type, callback);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, callback);
    }
}

addListener(document, 'DOMContentLoaded', function () {
    
    var mq = window.matchMedia("(max-width: 760px)");
    if (mq.matches) {
        document.getElementById("menu_list").classList.add("hidden");
    }

    addListener(document.getElementById("menu_button"), 'click', function () {
        document.getElementById("menu_list").classList.toggle("hidden");
    });
    
    addListener(window, 'resize', function () {
        var width = window.innerWidth ||
                    document.documentElement.clientWidth ||
                    document.body.clientWidth;
        
        if (width > 760) {
            document.getElementById("menu_list").classList.remove("hidden");
        } else {
            document.getElementById("menu_list").classList.add("hidden");
        }
    });
    
});

相關文章