我试图在屏幕底部为手机应用创建导航栏，类似于：https://dribbble.com/shots/3418526-Poppinz-Navbar-Animation 其中添加按钮是一个圆圈图标，比其他标签高一点。
仅使用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>
答案 0 :(得分：0)
是的，有很多方法可以做到。一种简单的方法是使用position: absolute和transform: translate()将圆圈图标添加到扩展到父级边界之外的其中一个链接。
body {
background: #eee;
}
nav {
width: 90%;
max-width: 600px;
background: white;
display: flex;
justify-content: space-between;
margin: 3em auto;
padding: 2em;
}
.special {
position: relative;
}
img {
border-radius: 50%;
max-width: 50px;
position: absolute;
top: 0; left: 50%;
transform: translate(-50%,calc(-115%));
}<nav>
<a href="#">link</a>
<a href="#">link</a>
<a href="#" class="special"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">i'm special</a>
<a href="#">link</a>
<a href="#">link</a>
</nav>
答案 1 :(得分：0)
JQM Navbar小部件正在注入Grid，但您可以自己为这样的网格提供标记。
这里棘手的部分是从该网格中删除overflow: hidden样式，然后我们只需要恢复一些顶部和底部填充。当然还有其他方法可以实现同样的目标。
如果您想尝试使用jQuery Mobile，我还会覆盖其他一些典型的（恕我直言）过于沉重的JQM样式，因此您只需通过评论每种样式就可以使用它来查看差异。
.ui-grid-d {
overflow: visible !important;
}
.ui-grid-d div {
font-weight: normal !important;
font-family: 'Jura', sans-serif !important;
font-size: 12px;
}
.ui-grid-d a {
margin: 0;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
text-align: center !important;
background: white;
padding-top: .3em;
padding-bottom: .9em;
}
.ui-btn-icon-notext.ui-btn-active:after {
background-color: transparent !important;
}
.ui-icon-big {
height: 52px !important;
width: 52px !important;
margin-top: -24px !important;
border-radius: 26px !important;
}
.ui-icon-big:after {
width: 32px !important;
height: 32px !important;
background-size: 22px !important;
margin-top: -16px !important;
margin-left: -16px !important;
//background-color: transparent !important;
}
/* jQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header">
</div>
<div data-role="content">
<h3>Custom Navbar</h3>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<div class="ui-grid-d" data-theme="a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-active"></a>
<div>Home</div>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-notext"></a>
<div>History</div>
</div>
<div class="ui-block-c">
<a href="#" class="ui-btn ui-corner-all ui-icon-plus ui-icon-big ui-btn-icon-notext"></a>
<div>Book</div>
</div>
<div class="ui-block-d">
<a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>
<div>Notifications</div>
</div>
<div class="ui-block-e">
<a href="#" class="ui-btn ui-corner-all ui-icon-tag ui-btn-icon-notext"></a>
<div>Profile</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
如果你还需要涟漪效应，你可以在这里找到一个极好的和JQM兼容的实现：Ripple effect in Material Design using jQuery and CSS3