jQuery Mobile: Navigation bar in the footer

This entry is part 53 of 73 in the series jQuery Mobile

We can also set the navigation in the footer.

We will still have the footer there and we will put the navigation bar right on top of the footer and they are both fixed.

<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>


    <div data-role='content'>
        <p>You can put your content here...</p>

    <div data-role='footer' data-position='fixed' style='overflow:hidden;'>
        <div data-role='navbar'>
                <li><a href='#'>One</a></li>
                <li><a href='#'>Two</a></li>
                <li><a href='#'>Three</a></li>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div><!-- /footer -->

Try The Code

Notice that the navbar is under the footer division and the footer has a fixed data position.

Series Navigation<< jQuery Mobile: Button on the right hand side of the header
jQuery Mobile: Navigation bar icon positioning >>

Leave a comment

Leave a Reply