css水平ドロップダウンメニューのサイズを調整する

メニューバーの幅をコントロールしたいと思います。たとえば、各項目が5pxをパディングとしてそれぞれ5pxしか使用していなかった場合には効果的です。現在のところ、メニュー全体がモバイルデバイスで画面幅を使用しすぎています。 max-widthへcss水平ドロップダウンメニューのサイズを調整する

<!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>

出典

2017-06-11 user3590052

https://jsfiddle.net/sfp4n88b/にjsfiddle.net – Ced

追加のコードを追加してください – user3590052

変更メニューの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>

出典

2017-06-11 23:54:14

css水平ドロップダウンメニューのサイズを調整する

答えて

関連する問題