0
私のナビゲーションメニューの裏付けが必要です。現在は垂直を表示していますが、右上に水平に表示します。私はより伝統的なナビゲーションを水平にする方法を知っていますが、これはツールに3つのセクションがあるブロックを持っています。 Image of pageナビゲーションメニューをインライン化できません
私はツールセクションに変更を加えています。そのドロップダウンにはたくさんのリンクがありますので、私はツールをドロップダウンするようにしようとしていたので、まっすぐドロップダウンとして醜いように見えます。
私が紛失している単純なものではない場合、私はちょうどテンプレートを見つけてそれを使って再構築するかもしれません。ありがとうございました！
<style>
li {
list-style-type: none;
display-inline;
}
a {
font-size: 14pt;
color: ;
}
#tools-title {
color: #fff;
}
#container{
width: 45%;
border: 1px solid #000;
padding: 15px;
background-color: #333;
}
#left{
float:left;
width:250px;
border-right: 1px solid #000;
}
#left a{
display: block;
}
#right{
float: right;
width: 250px;
}
#right a{
display: block;
}
#center{
margin:0 auto;
width:250px;
border-right: 1px solid #000;
}
#center a{
display: block;
}
</style>
<body>
<ul class="nav">
<li class="nav-list">
<ul class="nav-resources">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle"><img src="resources.png" title="Resources"><span>▾</span></a>
<ul class="dropdown-menu">
<li>
<a href="#" target="_blank">Test Task</a>
<a href="#" target="_blank">QA Training</a>
<a href="#" target="_blank">App Contact List</a>
</li>
</ul>
</li>
</ul>
<ul class="nav-guides">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<img src="info.png" title="Guides"><span>▾</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="Index/howto.html" target="_blank">Edit Links</a>
</li>
</ul>
</li>
</ul>
<ul class="nav-tools">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle"><img src="tools.png" title="Tools"><span>▾</span></a>
<ul class="dropdown-menu">
<div id="container">
<h3 id="tools-title">Tools Menu</h3>
<div id="left">
<li>
<a href="#" target="_blank">Application Logger</a>
<a href="#" target="_blank">Application Logger Dev</a>
<a href="#" target="_blank">Contract Search</a>
<a href="#" target="_blank">New Payment Lookup Tool</a>
<a href="#" target="_blank">New Payment Lookup Tool Dev</a>
</li>
</div>
<div id="right">
<li>
<a href="#" target="_blank">U-Haul Exception Viewer Dev 2</a>
<a href="#" target="_blank">Uhaul.net Exception Viewer</a>
<a href="#" target="_blank">WB Management</a>
<a href="#" target="_blank">WB Management Dev</a>
</li>
</div>
<div id="center">
<li>
<a href="#" target="_blank">QA Tool</a>
<a href="#" target="_blank">QA Tool Dev</a>
<a href="#" target="_blank">U-Haul Exception Viewer</a>
<a href="#">U-Haul Exception Viewer Dev</a>
<a href="#" target="_blank">U-Haul Exception Viewer 2</a>
</li>
</div>
</div>
</ul>
</li>
</ul>
<ul class="nav-about">
<li>
<a href="#" id="myBtn"><img src="about.png" title="About"></a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>QA Application Hub</h2>
</div>
<div class="modal-body">
<p>Version: 1.0.0</p>
<p>Last updated: 6/7/17</p>
<p>Created by: Mark White</p>
</div>
</div>
</li>
</ul>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<ul class="nav-mail">
<li>
<a href="mailto:[email protected]"><img src="mailicon.png" style="width: 32px; height: 40px;" title="Send Mail"></a>
</li>
</ul>
</li>
</ul>
</body>
それの問題は、それがツールメニューのドロップダウンのレイアウトを変更しています。 最終目標は水平メニューで、元の質問に追加した画像と同じメニューがドロップダウンメニューに表示されます。 –
'tools'ドロップダウンで試したことが間違っているので、CSSの変更を加えてみてください。 –