How to display selected menu item in ul dropdown menu

Question

I have a dropdown menu that displays font colors for user choice. At the moment, the dropdown displays 'style', however I would like the menu title to display the currently selected value. Here's the code:

HTML:

<div id="font_dropdown" class="dropdown">
    <nav id="primary_nav_wrap">
    <ul>
      <li class="current-menu-item"><a>
      <li><a href="#">Style</a>
        <ul class="font-names">
          <li style="font-family: Raleway"><a>Raleway</a></li>
          <li style="font-family: palatino"><a>Palatino</a></li>
          <li style="font-family: impact"><a>Impact</a></li>
          <li style="font-family: courier"><a>Courier</a></li>
          <li style="font-family: Copperplate"><a>Copperplate</a></li>
          <li style="font-family: Monospace"><a>Monospace</a></li>
          <li style="font-family: Fantasy"><a>Fantasy</a></li>
          <li style="font-family: Calibri"><a>Calibri</a></li>
          <li style="font-family: Cursive"><a>Cursive</a></li>
          <li style="font-family: Futura"><a>Futura</a></li>
          <li style="font-family: Rockwell"><a>Rockwell</a></li>
          <li style="font-family: Andale Mono"><a>Andale</a></li>
        </ul>
      </li>
    </ul>
    </nav>
  </div>

CSS:

#primary_nav_wrap
{
  margin-top:15px;
  font-family:raleway;


}

#primary_nav_wrap ul
{
  list-style:none;
  position:relative;
  float:left;
  margin:0;
  padding:0;
  font-family:raleway;

}

#primary_nav_wrap ul a
{
  display:block;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  line-height:32px;
  padding:0 15px;
  z-index:100;



}

#primary_nav_wrap ul li
{
  position:relative;
  float:left;
  margin:0px;
  padding:0;
  z-index:100;

}

#primary_nav_wrap ul li.current-menu-item
{
  background:#ddd;
  color: orange;
  z-index:100;

}

#primary_nav_wrap ul li:hover
{
  background:#F3F4F5;
  cursor: pointer;
  color: orange;
  z-index:100;
}

#primary_nav_wrap ul ul
{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  padding:0;
  z-index:100;

}

#primary_nav_wrap ul ul li
{
  float:none;
  z-index:100;
  width:235px
}

#primary_nav_wrap ul ul a
{
  line-height:120%;
  padding:10px 10px;
  text-align: left;
  left: 100px;
  z-index:100;
}

#primary_nav_wrap ul ul ul
{
  top:0;
  z-index:100;
  left:100%
}

#primary_nav_wrap ul li:hover > ul
{
  display:list-item;
  color: orange;
  z-index:100;

Javascript:

  $(document).on("click", '.font-names li a',  function() {    
      $("#imagewrap h3").css("font-family", $(this).parent().css("font-family"));
      $("#new_tile_font_style").val($(this).parent().css("font-family"));
   });

Sorry for messy code, I'm relatively new to this. Thanks!

Answer 1

Here's a bit of code that uses jQuery to do it:

$(".font-names > li").click(function() {
   $("#menutitle").text($(this).text()); 
});

You'll also need to add an id to your menu title element.

Live Demo:

$(".font-names > li").click(function() {
   $("#menutitle").text($(this).text()); 
});

#primary_nav_wrap
{
  margin-top:15px;
  font-family:raleway;


}

#primary_nav_wrap ul
{
  list-style:none;
  position:relative;
  float:left;
  margin:0;
  padding:0;
  font-family:raleway;

}

#primary_nav_wrap ul a
{
  display:block;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  line-height:32px;
  padding:0 15px;
  z-index:100;



}

#primary_nav_wrap ul li
{
  position:relative;
  float:left;
  margin:0px;
  padding:0;
  z-index:100;

}

#primary_nav_wrap ul li.current-menu-item
{
  background:#ddd;
  color: orange;
  z-index:100;

}

#primary_nav_wrap ul li:hover
{
  background:#F3F4F5;
  cursor: pointer;
  color: orange;
  z-index:100;
}

#primary_nav_wrap ul ul
{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  padding:0;
  z-index:100;

}

#primary_nav_wrap ul ul li
{
  float:none;
  z-index:100;
  width:235px
}

#primary_nav_wrap ul ul a
{
  line-height:120%;
  padding:10px 10px;
  text-align: left;
  left: 100px;
  z-index:100;
}

#primary_nav_wrap ul ul ul
{
  top:0;
  z-index:100;
  left:100%
}

#primary_nav_wrap ul li:hover > ul
{
  display:list-item;
  color: orange;
  z-index:100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="font_dropdown" class="dropdown">
    <nav id="primary_nav_wrap">
    <ul>
      <li class="current-menu-item"><a>
      <li><a id="menutitle" href="#">Style</a>
        <ul class="font-names">
          <li style="font-family: Raleway"><a>Raleway</a></li>
          <li style="font-family: palatino"><a>Palatino</a></li>
          <li style="font-family: impact"><a>Impact</a></li>
          <li style="font-family: courier"><a>Courier</a></li>
          <li style="font-family: Copperplate"><a>Copperplate</a></li>
          <li style="font-family: Monospace"><a>Monospace</a></li>
          <li style="font-family: Fantasy"><a>Fantasy</a></li>
          <li style="font-family: Calibri"><a>Calibri</a></li>
          <li style="font-family: Cursive"><a>Cursive</a></li>
          <li style="font-family: Futura"><a>Futura</a></li>
          <li style="font-family: Rockwell"><a>Rockwell</a></li>
          <li style="font-family: Andale Mono"><a>Andale</a></li>
        </ul>
      </li>
    </ul>
    </nav>
  </div>

JSFiddle version: https://jsfiddle.net/m129zd8m/

Answer 2

Bind a click event handler to your li items and replace the text for the li.

$('.font-names li').on('click', function () {
    var $currentMenuItem = $('.current-menu-item a'),
        currentText = $('a', this).text();

    $currentMenuItem.text(currentText);
});

But looks like your HTML is a bit malformed

 <ul>
      <li class="current-menu-item"><a>   <----
      <li><a href="#">Style</a>           <----
        <ul class="font-names">

The right selector has to be changed based on it.

Fiddle

Answer 3

Maybe if you add the class current-menu-item to the ul you want to select?