0
jqueryモバイルボタンをドロップダウンナビゲーションバーに追加しようとしています。私は<ul>
タグをモバイルボタンのスタイルにすることはできません。 jqueryのスタイリングが効き目がないものを試してみます。私はjsフィドルを含んでいます。ここでCSS内のjqueryモバイルボタンドロップダウンナビゲーションバー
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li.right {
float: right;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 40px;
background-color: #333;
}
<nav class="fixed-nav-bar">
<ul data-role="listview" ">
<li><a class="active " href="#home ">Home</a></li>
<li><a href="#news ">News</a></li>
<li class="dropdown ">
<a href="# " class="dropbtn ">Dropdown</a>
<div class="dropdown-content ">
<a href="# ">Link 1</a>
<a href="# ">Link 2</a>
<a href="# ">Link 3</a>
</div>
</li>
<li class="right ">
\t
\t \t <a id="Logout " class="ui-btn ui-icon-search ui-btn-icon-left ">Logout</a>
\t
</li>
</ul>
</nav>
jsfiddleです:https://jsfiddle.net/w8xy7Lu2/
どのボタンをナビゲーションバーに追加しようとしていますか? –
実際にjqueryモバイルからの電源アイコンです。 – user2810718
Logout – user2810718