亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

修復導航欄下拉錯誤定位并且只在一個頁面上工作

修復導航欄下拉錯誤定位并且只在一個頁面上工作

PHP
慕的地8271018 2022-07-29 15:26:43
所以我一直在為我和我的朋友在學校制作一個網站,因為他們阻止了一切,所以我制作了自己的聊天系統等。我正在尋找一些幫助來修復我的導航欄下拉列表,目前不起作用完全沒有,但是 php 中有標簽,因為有人可以請看看是否有一個很棒的修復程序!希望這篇文章的答案對尋找相同功能的其他人有用!頭文件.php<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>MopedBoyz</title>        <link rel="icon" href="img/mopedIcon.ico">        <link rel="stylesheet" href="css/nav.css">        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">        </head>            <div id="main-navigation" class="animated bounceInDown">            <div class="inner">                <div class="navigation-left">                    <a href="index.php" class="logo bold">MopedBoyz</a>                </div>                <div class="hamburger-menu">                    <div class="bar"></div>                </div>                <div class="navigation-right">                    <a href="index.php" class="item">Links</a>                    <a href="chat.php" class="item">Chat</a>                    <a href="login.php" class="item">Login</a>                    <a href="register.php" class="item">Register</a>                    <a href="usercp.php" class="item">Settings</a>                    <a href="#" class="item hosting-dropdown">Account                     <i class="fa fa-caret-down"></i></a>                        <li class="dropdown">                            <a href="login.php">Login</a>                            <a href="register.php">Register</a>                            <a href="usercp.php">Settings</a>                            <a href="sys/logout.php">Logout</a>                        </li>                    <a href="sys/logout.php" class="button-primary">Logout</a>                </div>            </div>        </div>            
查看完整描述

1 回答

?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

如果閱讀您的 3000 行 css 代碼非常困難,但我為您做了一個工作示例。你可以在jsFiddle上找到它。


我認為您應該按如下方式構建“下拉”容器:


 <ul class="dropdown">

    <li><a href="login.php">Login</a></li>

    <li><a href="register.php">Register</a></li>

    <li><a href="usercp.php">Settings</a></li>

    <li><a href="sys/logout.php">Logout</a></li>

 </ul>

'li' 標簽應該放在上面的 'ul' 中。


整個“下拉”容器應放置在“主機下拉”內,該“主機下拉”打開和關閉“下拉”。因此,您可以調整“下拉”容器相對于“托管下拉”按鈕的位置。


 <div id="dropdown" class="item hosting-dropdown">

      <span>Account<i class="fa fa-caret-down"></i></span>

      <ul class="dropdown">

          <li><a href="login.php">Login</a></li>

          <li><a href="register.php">Register</a></li>

          <li><a href="usercp.php">Settings</a></li>

          <li><a href="sys/logout.php">Logout</a></li>

     </ul>

 </div>

下拉打開和關閉可以用一個jQuery小函數來實現:


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

    $('#dropdown').click(function() {

    $(this).toggleClass('opened');

  })

})

和CSS:


.hosting-dropdown { 

  display: inline-block;

  margin-left: 10px;

  position: relative;

  cursor: pointer;

}  


.dropdown {

  position: absolute;

  right: 0;

  top: 55px;

  background-color: rgba(0, 0, 0, 0.4);

  padding: 15px;

  margin: 0;

  display: none; 

}


.hosting-dropdown.opened .dropdown {

  display: block;

}


.dropdown li {

  list-style: none;

  padding: 5px 0;

}


.main-navigation {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  float: left;

}


.content {

  height: 2000px;

  width: 100%;

  background-color:#fff

}


#main-navigation .navigation-left {

  padding: 27px 0;   

}

#main-navigation .navigation-right{

  padding: 35px 0; 

}

如果您有任何問題,請與我聯系。


查看完整回答
反對 回復 2022-07-29
  • 1 回答
  • 0 關注
  • 123 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號