Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Paul Neumyer
Paul Neumyer
15,301 Points

jQuery - Traversing panel navigation into mobile menu

Hello,

I am having some trouble taking a bootstrap panel navigation and adding it to the mobile menu dropdown. Here is the page in question followed by my attempt at jQuery to add it to the mobile menu. Any help would be greatly appreciated.

NAVIGATION

<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://readyags.local/dashboard"> <img alt="Brand" src="http://readyags.local/images/guest/ReadyAGSLogo_white.png"> <label>Life in the Fast Lane</label> </a> </div>

PAGE

<div style="max-width: 100%;">

<hr style=" width: 100%; display: block; height: 10px; border: 0; border-top: 1px solid #337ab7; border-radius: 3px;">

<!-- ROW2 -->

<div class="row panel-nav">

<!-- <div class="col-xs-12 col-sm-6 col-md-2"> -->
<div class="panel-menu-item">

    <a href="<?php echo base_url()  . $home ?>" role="button">


        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-th-large text-center" style="font-size: 5vh;"></span>
            </div>
                <div class="panel-footer panel-primary text-center">Dashboard</div>
        </div>
    </a>
</div>


<div class="panel-menu-item">
    <a href="<?php base_url() ?>/registration/org_list" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-search text-center" style="font-size: 5vh;"></span>
            </div>
                <div class="panel-footer panel-primary text-center">Find Facilities</div>
        </div>
    </a>
</div>

<div class="panel-menu-item">
    <a href="<?php base_url() ?>/pregate/workload" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-barcode text-center" style="font-size: 5vh;"></span>
            </div>
                <div class="panel-footer panel-primary text-center">All Jobs</div>
        </div>
    </a>
</div>

<div class="panel-menu-item">
    <a href="<?php base_url() ?>/facility_driver/driver_history" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-calendar text-center" style="font-size: 5vh;"></span>
            </div>
                <div class="panel-footer panel-primary text-center">All History</div>
        </div>
    </a>
</div>


<div class="panel-menu-item">
    <a href="<?php base_url() ?>/profile/my_profile" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-user text-center" style="font-size: 5vh;"></span>
            </div>
                <div class="panel-footer panel-default text-center">Profile</div>
        </div>
    </a>
</div>

<div class="panel-menu-item"> <a href="<?php base_url() ?>/access_control/manage_account/" role="button"> <div class="panel panel-primary"> <div class="panel-body text-center bg-primary"> <span class="glyphicon glyphicon-cog text-center" style="font-size: 5vh;"></span> </div> <div class="panel-footer panel-default text-center">Account</div> </div> </a> </div>

</div>

</div>

JQUERY

<script>
$('.panel-menu-item > a').each(function(){
var $nav-item = $(this > '.panel-footer');
var $li = $('<li></li>');
$li.val($(this).attr('href'));
$li.text($nav-item.text());
$('.nav-bar').append($li);
});
</script>
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Taking a look now...

6 Answers

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

OK. This works although it would probably be better to append once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Append Menu</title>
</head>
<body>

<!-- START NAVIGATION -->
<ul class="nav navbar-nav">
    <li class="visible-xs visible-sm visible-md" id="mobile-login"><a href="http://dev.readyags.com/guest">LOGIN</a></li>
    <li class="visible-xs visible-sm visible-md" id="mobile-signup"><a href="http://dev.readyags.com/access_control/signup/free">SIGN UP</a></li>
    <li><a href="http://dev.readyags.com/guest/benefits">BENEFITS</a></li>
    <li><a href="http://dev.readyags.com/guest/technology">TECHNOLOGY</a></li>
    <!-- <li><a href="http://dev.readyags.com/guest/news">NEWS</a></li> -->
    <li><a href="http://dev.readyags.com/guest/contact">CONTACT US</a></li>
</ul>
<!-- END NAVIGATION -->


<div id="TESTSPACER" style="padding: 100px;"></div>


<!-- START PAGE -->
<!-- <div class="col-xs-12 col-sm-6 col-md-2"> -->
<div class="panel-menu-item">
    <a href="<?php echo base_url()  . $home ?>" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-th-large text-center" style="font-size: 5vh;"></span>
            </div>
            <div class="panel-footer panel-primary text-center">Dashboard</div>
        </div>
    </a>
</div>


<div class="panel-menu-item">
    <a href="<?php base_url() ?>/registration/org_list" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-search text-center" style="font-size: 5vh;"></span>
            </div>
            <div class="panel-footer panel-primary text-center">Find Facilities</div>
        </div>
    </a>
</div>


<div class="panel-menu-item">
    <a href="<?php base_url() ?>/pregate/workload" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-barcode text-center" style="font-size: 5vh;"></span>
            </div>
            <div class="panel-footer panel-primary text-center">All Jobs</div>
        </div>
    </a>
</div>


<div class="panel-menu-item">
    <a href="<?php base_url() ?>/facility_driver/driver_history" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-calendar text-center" style="font-size: 5vh;"></span>
            </div>
            <div class="panel-footer panel-primary text-center">All History</div>
        </div>
    </a>
</div>


<div class="panel-menu-item">
    <a href="<?php base_url() ?>/profile/my_profile" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
               <span class="glyphicon glyphicon-user text-center" style="font-size: 5vh;"></span>
            </div>
            <div class="panel-footer panel-default text-center">Profile</div>
        </div>
    </a>
</div>


<div class="panel-menu-item"><!-- I think this tag was missing -->
    <a href="<?php base_url() ?>/access_control/manage_account/" role="button">
        <div class="panel panel-primary">
            <div class="panel-body text-center bg-primary">
                <span class="glyphicon glyphicon-cog text-center" style="font-size: 5vh;"></span>
            </div>
            <div class="panel-footer panel-default text-center">Account</div>
        </div>
    </a>
</div>
<!-- END PAGE -->




<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var panelLinkHref,
    panelLinkText,
    $listElement;

$('.panel-menu-item').each(function(){

    //get the menu item link
    panelLinkHref = $(this).find('a').attr('href');
    //get the menu item text
    panelLinkText = $(this).find('.panel-footer').text().toUpperCase();

    //generate list item with link
    $listElement = $('<li></li>').append( 
        $('<a></a>', { 
            href: panelLinkHref, 
            text: panelLinkText 
        })
    );

    //append list item to navigation
    $('.navbar-nav').append($listElement);
});

</script>

</body>
</html>
Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

Sorry the navigation currently looks like this: 

<ul class="nav navbar-nav">
        <li class="visible-xs visible-sm visible-md" id="mobile-login"><a href="http://dev.readyags.com/guest">LOGIN</a></li>
        <li class="visible-xs visible-sm visible-md" id="mobile-signup"><a href="http://dev.readyags.com/access_control/signup/free">SIGN UP</a></li>
        <li><a href="http://dev.readyags.com/guest/benefits">BENEFITS</a></li>
        <li><a href="http://dev.readyags.com/guest/technology">TECHNOLOGY</a></li>
        <!-- <li><a href="http://dev.readyags.com/guest/news">NEWS</a></li> -->
        <li><a href="http://dev.readyags.com/guest/contact">CONTACT US</a></li>
      </ul>
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Would it be accurate to say that you are trying to add the links in panel-menu-items to the nav menu? maybe something like this?

  • LOGIN
  • SIGN UP
  • BENEFITS
  • TECHNOLOGY
  • CONTACT US
  • DASHBOARD
  • FIND FACILITIES
  • ALL JOBS
  • ALL HISTORY
  • PROFILE
  • ACCOUNT
Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

Yes that is right!

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

OK. I think that I can get that working. It'll take a few minutes (maybe 10-15) but I'll post shortly

Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

Great it looks good. However, how would I be able to clone it into the menu rather than moving it altogether?

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

It shouldn't be being moved since we generated new elements instead of appending the existing elements. Paste the full code in a file and run it. The first menu and new menu are present. Are you experiencing something different?

Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

I'm sorry I threw it up on JSFiddle and didn't scroll down far enough. You are right. Thank you for all your help.

https://jsfiddle.net/4z8jyupu/

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

No problem. I should have mentioned that I pushed the other menu down.