How to customize the jQuery Mobile Navbar?

Question

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>

score 0 · Answer 1 · answered May 25 '17 at 19:10

0

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>

answered May 25 '17 at 19:10

Michael Coker

52,626
5
64
64

That didn't work for me, since I'm using jquery mobile for the navbar/footer. – Andrea G May 25 '17 at 20:01
@AndreaG then include the code you're using. If you don't include the code, we don't have a reference and all we can do is guess. The technique still stands though. You can just add an image to the nav element. The markup here isn't very different from what I have in my solution https://demos.jquerymobile.com/1.2.0/docs/toolbars/docs-navbar.html – Michael Coker May 25 '17 at 20:26
Sorry, I will add the code. Just have to figure out how. – Andrea G May 25 '17 at 20:40
When I add your code to a page with the default jquery ui JS & CSS, it doesn't style your menu at all. Create a demo that reproduces your current layout in your post please. – Michael Coker May 25 '17 at 21:30
I tried fixing it, I'm not sure why it isn't styling it. It styles it on my computer when I open it with Chrome. – Andrea G May 26 '17 at 01:42

deblocker · Answer 2 · 2017-05-27T01:30:19.197

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

How to customize the jQuery Mobile Navbar?

2 Answers2

Linked