How To Customize The Jquery Mobile Navbar?
Solution 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><ahref="#">link</a><ahref="#">link</a><ahref="#"class="special"><imgsrc="http://kenwheeler.github.io/slick/img/lazyfonz2.png">i'm special</a><ahref="#">link</a><ahref="#">link</a></nav>Solution 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-ddiv {
font-weight: normal !important;
font-family: 'Jura', sans-serif !important;
font-size: 12px;
}
.ui-grid-da {
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><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"><linkhref="https://fonts.googleapis.com/css?family=Jura" ><linkhref="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"><linkhref="style.css" /><scriptsrc="https://code.jquery.com/jquery-1.11.2.min.js"></script><scriptsrc="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><scriptsrc="script.js"></script></head><body><divdata-role="page"id="page-one"><divdata-role="header"></div><divdata-role="content"><h3>Custom Navbar</h3></div><divdata-role="footer"data-position="fixed"><divdata-role="navbar"><divclass="ui-grid-d"data-theme="a"><divclass="ui-block-a"><ahref="#"class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-active"></a><div>Home</div></div><divclass="ui-block-b"><ahref="#"class="ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-notext"></a><div>History</div></div><divclass="ui-block-c"><ahref="#"class="ui-btn ui-corner-all ui-icon-plus ui-icon-big ui-btn-icon-notext"></a><div>Book</div></div><divclass="ui-block-d"><ahref="#"class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a><div>Notifications</div></div><divclass="ui-block-e"><ahref="#"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
Post a Comment for "How To Customize The Jquery Mobile Navbar?"