1
我正在嘗試爲屏幕底部的手機應用製作導航欄，類似於以下內容：https://dribbble.com/shots/3418526-Poppinz-Navbar-Animation 其中，添加按鈕是一個圓形圖標，比其他選項卡高一點。如何自定義jQuery Mobile Navbar？
只有HTML，CSS和jQuery Mobile纔可以做到這一點嗎？
我還在學習代碼，我必須使用jQuery Mobile。我怎樣才能做到這一點？
.nav-icons .ui-btn {
padding-top: 50px !important;
font-family: 'lato', sans-serif !important;
font-size: 18px !important;
font-weight: 100 !important;
text-shadow: none !important;
color: #FFF !important;
background-color: #03314c !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
border: 0px !important;
}
.nav-icons .ui-btn:after {
width: 36px;
height: 36px;
margin-left: -15px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0;
border: 0px;
}
.ui-btn:active {
background-color: #004d78 !important;
}
#home:after {
background: url("icons/home/home_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
font-weight: 100;
}
#two:after {
background: url("icons/clock/clock_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#three:after {
position: relative;
display: flex !important;
justify-content: space-between !important;
}
#four:after {
background: url("icons/dollarsign/dollarsign_white fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#five:after {
background: url("icons/dotmenu/dotmenu_whitefillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
img {
max-width: 50px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, calc(-40%));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h1>hello</h1>
<div data-role="footer" class="nav-icons" data-theme="a">
<div data-role="navbar" class="nav-icons" data-grid="d">
<ul>
<li><a href="#" id="home" data-icon="custom">Home</a></li>
<li><a href="#" id="two" data-icon="custom">2</a></li>
<li>
<a href="#" id="three"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">3</a>
</li>
<li><a href="#" id="four" data-icon="custom">4</a></li>
<li><a href="#" id="five" data-icon="custom">5</a></li>
</ul>
</div>
</div>
這並沒有爲我工作，因爲我使用用於導航欄/頁腳的jquery移動版。 –
@AndreaG然後包含您正在使用的代碼。如果你不包括代碼，我們沒有參考，我們所能做的只是猜測。該技術仍然存在。您可以將圖像添加到導航元素。這裏的標記與我在解決方案中的標記沒有太大區別https://demos.jquerymobile.com/1.2.0/docs/toolbars/docs-navbar.html –
對不起，我將添加代碼。只需要弄清楚如何。 –