问题
I'm trying to make a navbar for a phone app on the bottom of the screen, something similar to this: https://dribbble.com/shots/3418526-Poppinz-Navbar-Animation where the add button is a circle icon and a bit higher than the other tabs.
Would this be possible with just HTML, CSS, and jQuery Mobile?
I'm still learning to code and I have to use jQuery Mobile. How can I achieve this?
.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>回答1:
Yeah there are a bunch of ways you could do it. A simple way would be to use position: absolute and transform: translate() to add a circle icon to one of the links that expands outside of the bounds of the parent.
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>回答2:
The JQM Navbar widget is injecting a Grid, but you can provide the markup for such a grid by yourself.
The tricky part here is to remove the overflow: hidden style from that grid, then we just need to restore some top and bottom padding. Of course there will be other methods to achieve the same.
As you like to experiment with jQuery Mobile, i have also overridden some other typical (IMHO) too heavy JQM styles, so you can play with it to see the difference simply by commenting each style.
.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>If you need also the ripple effect, you can find a superb and JQM-compatible implementation here: Ripple effect in Material Design using jQuery and CSS3
来源：https://stackoverflow.com/questions/44187805/how-to-customize-the-jquery-mobile-navbar