css调整水平下拉菜单的大小

时间：2017-06-11 23:32:32

标签： javascript jquery html css

我希望对菜单栏的宽度有一些控制，例如，如果每个项目仅使用每侧5px作为填充，那将是很好的。目前，整个菜单在移动设备上使用了太多的屏幕宽度。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="Width=device-Width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.drop_menu {
position: relative;
background: #005555;
list-style-type: none;
height: 40px;
width: 460px;
display: flex;
padding: 0;
margin:0 auto;
background-image: url("http://snaklvr.com/bg.jpg");
}
img {
float: center;
}
.drop_menu li a {
padding: 12px 20px;
display: inline-block;
color: #fff;
text-decoration: none;
font: 12px arial, verdana, sans-serif;
}
.drop_menu > li {
border-right: 1px solid #75809a;
width: 100%;
text-align: center;
}
.drop_menu > li:last-child {
border-right: none;
}
/* Submenu */
.drop_menu ul {
text-align: left;
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
display: inline;
}
.drop_menu li:hover {
position: relative;
background: #75809a;
}
.drop_menu li:hover ul {
left: 0px;
top: 38px;
background: #75809a;
padding: 0px;
}
.drop_menu li:hover ul li a {
padding: 10px;
display: block;
width: 168px;
text-indent: 15px;
background-color: #75809a;
}
.drop_menu li:hover ul li a:hover {
background: #005555;
}

tbody div{
overflow:scroll;
height:400px;
}

#InTheCenter {
text-align:center;
}


div.topdiv {
clear: both;
position: fixed;
top: 0;
height: 60%;
width: 100%;
background-color: #bfb9b5;
color: #FFFFFF;
font-size: 16px;
text-align: center;
left: 400;
}

div.bottomdiv {
clear: both;
position: fixed;
top: 60%;
height: 40%;
width: 100%;
background-color: #bfb9b5;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}


</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<SCRIPT TYPE="text/javascript">
var LeftsideMeetingsPopup = ((document.documentElement.clientWidth / 2) - 550);
var TopOfMeetingsPopup = ((document.documentElement.clientHeight / 2) - 300);

var LeftsideEventsPopup = ((document.documentElement.clientWidth / 2) - 310);
var TopOfEventsPopup = ((document.documentElement.clientHeight / 2) - 180);

var MeetingsParams = 'Width=1100,Height=600,Left=' + LeftsideMeetingsPopup + ',Top=' + TopOfMeetingsPopup + ',scrollbars=no';
var EventsParams = 'Width=620,Height=360,Left=' + LeftsideEventsPopup + ',Top=' + TopOfEventsPopup + ',scrollbars=no';


function Meetings_Popup(mylink, windowname) {
if (!window.focus) return true;
var href;
if (typeof(mylink) == 'string') href = mylink;
else href = mylink.href;
window.open(href, windowname, MeetingsParams);
return false;
}

function Events_Popup(mylink, windowname) {
if (!window.focus) return true;
var href;
if (typeof(mylink) == 'string') href = mylink;
else href = mylink.href;
window.open(href, windowname, EventsParams);
return false;
}
</SCRIPT>
</head>
<body bgcolor="#bfb9b5">
<div class="topdiv">
<div class="InTheCenter">
<br/><img src="http://snaklvr.com/test.jpg" width="940" height="200"><br/>
</div>
<div>
</BR>
<ul class="drop_menu">
<li><A href="#" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a></li>
<li><A href="#" onClick="return Events_Popup(this, 'notes')">Events</a></li>
<li>
<A href='#'>Misc Links</a>
<ul>
<li><A target="_blank" href="http://www.amazon.com/">Amazon</a></li>
<li><A target="_blank" href="http://www.google.com">Google</a></li>
<li><A target="_blank" href="https://lowes.com/">Lowes</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

将菜单的width更改为max-width，以便缩放到更小的尺寸，并将链接上的水平填充更改为5px（或者您想在那里使用的任何内容）

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="Width=device-Width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    .drop_menu {
      position: relative;
      background: #005555;
      list-style-type: none;
      height: 40px;
      max-width: 460px;
      display: flex;
      padding: 0;
      margin: 0 auto;
      background-image: url("http://snaklvr.com/bg.jpg");
    }
    img {
      float: center;
    }
    .drop_menu li a {
      padding: 12px 5px;
      display: inline-block;
      color: #fff;
      text-decoration: none;
      font: 12px arial, verdana, sans-serif;
    }
    .drop_menu > li {
      border-right: 1px solid #75809a;
      width: 100%;
      text-align: center;
    }
    .drop_menu > li:last-child {
      border-right: none;
    }
    /* Submenu */
    .drop_menu ul {
      text-align: left;
      position: absolute;
      left: -9999px;
      top: -9999px;
      list-style-type: none;
      display: inline;
    }
    .drop_menu li:hover {
      position: relative;
      background: #75809a;
    }
    .drop_menu li:hover ul {
      left: 0px;
      top: 38px;
      background: #75809a;
      padding: 0px;
    }
    .drop_menu li:hover ul li a {
      padding: 10px;
      display: block;
      width: 168px;
      text-indent: 15px;
      background-color: #75809a;
    }
    .drop_menu li:hover ul li a:hover {
      background: #005555;
    }
    
    tbody div {
      overflow: scroll;
      height: 400px;
    }
    
    #InTheCenter {
      text-align: center;
    }
    
    div.topdiv {
      clear: both;
      position: fixed;
      top: 0;
      height: 60%;
      width: 100%;
      background-color: #bfb9b5;
      color: #FFFFFF;
      font-size: 16px;
      text-align: center;
      left: 400;
    }
    
    div.bottomdiv {
      clear: both;
      position: fixed;
      top: 60%;
      height: 40%;
      width: 100%;
      background-color: #bfb9b5;
      color: #FFFFFF;
      font-size: 16px;
      text-align: center;
    }
  </style>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <SCRIPT TYPE="text/javascript">
    var LeftsideMeetingsPopup = document.documentElement.clientWidth / 2 - 550;
    var TopOfMeetingsPopup = document.documentElement.clientHeight / 2 - 300;
    
    var LeftsideEventsPopup = document.documentElement.clientWidth / 2 - 310;
    var TopOfEventsPopup = document.documentElement.clientHeight / 2 - 180;
    
    var MeetingsParams =
      "Width=1100,Height=600,Left=" +
      LeftsideMeetingsPopup +
      ",Top=" +
      TopOfMeetingsPopup +
      ",scrollbars=no";
    var EventsParams =
      "Width=620,Height=360,Left=" +
      LeftsideEventsPopup +
      ",Top=" +
      TopOfEventsPopup +
      ",scrollbars=no";
    
    function Meetings_Popup(mylink, windowname) {
      if (!window.focus) return true;
      var href;
      if (typeof mylink == "string") href = mylink;
      else href = mylink.href;
      window.open(href, windowname, MeetingsParams);
      return false;
    }
    
    function Events_Popup(mylink, windowname) {
      if (!window.focus) return true;
      var href;
      if (typeof mylink == "string") href = mylink;
      else href = mylink.href;
      window.open(href, windowname, EventsParams);
      return false;
    }
  </SCRIPT>
</head>

<body bgcolor="#bfb9b5">
  <div class="topdiv">
    <div class="InTheCenter">
      <br/><img src="http://snaklvr.com/test.jpg" width="940" height="200"><br/>
    </div>
    <div>
      </BR>
      <ul class="drop_menu">
        <li>
          <A href="#" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a>
        </li>
        <li>
          <A href="#" onClick="return Events_Popup(this, 'notes')">Events</a>
        </li>
        <li>
          <A href='#'>Misc Links</a>
          <ul>
            <li>
              <A target="_blank" href="http://www.amazon.com/">Amazon</a>
            </li>
            <li>
              <A target="_blank" href="http://www.google.com">Google</a>
            </li>
            <li>
              <A target="_blank" href="https://lowes.com/">Lowes</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

相关问题
最新问题