Products

Solutions

Learn More

Partners

Community

Blog

About

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Adding Dropdown to dnnMobileMenuAdding Dropdown to dnnMobileMenu
Previous
 
Next
New Post
9/26/2016 4:57 PM
 

Hello,

I am using DNN Standard Menu for the desktop version of a website, and am using Mobile Menu for mobile browsers. I would like to be able to have items in the menu with the "haschildMobile" class to be able to click to drop down to show the children pages rather then just having them all open at once. I am trying to use CSS and jQuery to make this happen, but am having problems.

Any ideas?

#dnnMobileMenu .mobileTopLevel { 
position: relative; 
height: auto; 
margin: 0; 
padding: 0; 
}
#dnnMobileMenu .mobileTopLevel li a {
display: inline-block;
color: #999;
font-size: 13px;
}
#dnnMobileMenu .mobileTopLevel li a span { 
display: inline-block; 
height: 42px; 
line-height: 42px; 
margin: 0; 
padding: 0 15px; 
text-transform: uppercase; 
}
#dnnMobileMenu .mobileTopLevel li { 
position: relative; 
list-style-type: none; 
float: none; 
width: 100%; 
border-top: 1px solid #e1e1e1; 
}
li.haschildMobile:after { 
padding-left: 4px; 
content: ' v'; 
}
#dnnMobileMenu .mobileSubLevel li { 
display: none; 
}
$(function(){
    $('.haschildMobile').click(function() {
      $(this).('.mobileSubLevel').toggle();
    $('.mobileSubLevel').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    $('html').click(function() {
      $('.mobileSubLevel').hide();
    });
})
<div id="dnnMobileMenu">
<ul class="mobileTopLevel">

<li class="itemMobile firstMobile breadcrumbMobile selectedMobile">

<a href="#"><span>Home</span></a>

</li>

<li class="itemMobile haschildMobile">

<a href="#"><span>Dropdown Area</span></a>

<div class="mobileSubLevel">
<ul>

<li class="itemMobile firstMobile">

<a href="#"><span>Item 1</span></a>

</li>

 <li class="itemMobile">

<a href="#"><span>Item 2</span></a>

</li>

<li class="itemMobile">

<a href="#"><span>Item 3</span></a>
</li>
</ul>
</div>
</ul>

</div>

Thank you in advance for your help.

 
New Post
9/28/2016 11:41 AM
 

Update:

Using the following code and dnnMobileMenu, I can get all of the .mobileSubLevel items to show. I am still looking to show just the one selected.

jQuery(document).ready(function(){
    $('#dnnMobileMenu .mobileTopLevel > li.haschildMobile').click(function() {
    $('.mobileSubLevel').toggle();
   });
});

When I try to use the following code to just show one of the subLevel menus, it doesn't show any of them, including the one clicked:

$('.mobileSubLevel').not($(this).siblings()).hide();
e.stopPropagation();
});

Any ideas?

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Adding Dropdown to dnnMobileMenuAdding Dropdown to dnnMobileMenu


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
DNN Launch Webinar
VIEW ON-DEMAND
DNN Launch Webinar
VIEW ON-DEMAND
DNN Launch Webinar
VIEW ON-DEMAND