Develop Reference

Copy and get the first level of elements

I'm trying to figure out how I can get the first-level lists of elements without the child elements below. So only Program 1, Program 2, Program 3 and Program 4 are the only items or elements I need to get.
Can't seem to find a solution on how I can accomplish it. This is just a sample code in the project I'm working and the markup cannot be edited to add specific classes.
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList.slice(0);
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>

To achieve this you can use the child selector, >, to get the child ul elements and remove them from the cloned ul. Try this:
var $menuContainer = $('<ul class="menu" />');
var $nonDegMenu = $('#header a[href$="/programs"]').next().clone();
var $items = $menuContainer.appendTo('#footer .programs-menu .non-degree');
$nonDegMenu.find('li > ul').remove();
$items.append($nonDegMenu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li>Program A</li>
<li>Program B</li>
<li>Program C</li>
<li>Program D</li>
</ul>
</li>
<li>
Programs 2
<ul>
<li>Program E</li>
<li>Program F</li>
<li>Program G</li>
<li>Program H</li>
</ul>
</li>
<li>
Programs 3
<ul>
<li>Program I</li>
<li>Program J</li>
<li>Program K</li>
<li>Program L</li>
</ul>
</li>
<li>
Programs 4
<ul>
<li>Program M</li>
<li>Program N</li>
<li>Program O</li>
<li>Program P</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<div class="programs-menu">
<div class="non-degree"></div>
</div>
</div>

Materialize side-nav links doesn't work

I'm making an web with materializecss but links I add on the side nav doesn't work what can I do with it,
When I click the link the side-nav close
code:
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<div class="background">
<img src="<?php echo $srcurl; ?>/cover.png">
</div>
<img class="circle" src="<?php echo $srcurl; ?>/logo.png">
<span class="black-text name">DIGINEWS</span>
</div>
</li>
<li><center>MENU</center></li>
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<script> $(".button-collapse").sideNav(); </script>
</div>
</nav>
</div>

Wrap your JS code for sideNav within documentReady event, and set parameter closeOnClick as true.
Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed . This is to avoid known issues with overlay. See this stackoverflow question and accepted answer
$( document ).ready(function(){
$('.button-collapse').sideNav({
closeOnClick: true
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="#">Home</a></li>
<li><a class="waves-effect" href="#">About us</a></li>
</ul>
</div>
</nav>
</div>
<ul class="side-nav" id="mobile-demo">
<li><center>MENU</center></li>
<li><a class="waves-effect" href="#!">Home</a></li>
<li><a class="waves-effect" href="#!">About us</a></li>
</ul>

simply code below....
you need to add CDN of materialize sc,js and jquery js
Here is your fix nav bar
<div class="navbar-fixed">
<nav class="nav-wrapper">
<div class="container">
Picnic.lk
<a href="" class="sidenav-trigger" data-target="mobile-menu">
<i class="material-icons">menu</i>
</a>
<ul class="hide-on-med-and-down right">
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</div>
</nav>
</div>
your mobile nav bar (side nav)
<ul class="sidenav grey lighten-2" id="mobile-menu">
<li><a class="sidenav-close" href="#photos">Photos</a></li>
<li><a class="sidenav-close" href="#services">Services</a></li>
<li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>
Add below js code
<script>
$(document).ready(function(){
//side navigation
$('.sidenav').sidenav({
//your additional code goes here
});
});

Materialize dropdown and sidenav doesn't work

I'm using Materialize for my design. The dropdown and the sidenav doesn't work. The console doesn't give any errors and I did initialize the scripts after jQuery just like the materializecss.js.
Here's the code:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(".button-collapse").sideNav();</script>
<script>$(document).ready(function(){
$('.parallax').parallax();
});</script>
<script>
$(".dropdown-button").dropdown({
hover: false
});
</script>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>

You need to make sure the document has loaded before setting the side nav and dropdown. Just move that code inside your document.ready function
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});</script>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>

Have you tried putting script at the END OF BODY ELEMENT? It works for me.
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});
</script>

This code worked for me!! You can find the entire explanation in here: http://materializecss.com/side-nav.html
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<ul id='dropdown1' class='dropdown-content'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</ul>
<i class="mdi-navigation-menu"></i>

Bootstrap Inline List with Dropdown

I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
http://jsfiddle.net/9kVCZ/
But the dropdown doesn't appear under, it appears way at the bottom.

You need to add the class dropdown to your nav element.
<nav class='main-nav dropdown'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Working Fiddle

If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test1</a></li>
<li class="dropdown">
Test2
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Updated fiddle

horizontal menu submenu

I have a horizontal list menu and another horizontal list sub menu for each menu item.
Now when the page loads for the first time, first top menu with its sub menu and other top menus should show up and stay on if I mouse away or until i hover over other top menu item. As i hover over the other menus, their corresponding sub menus should show up.
Can someone show me how to do it using javascript or jquery or css only?
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
<li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<DIV class="tabcontainer">
<div id="sc1" class="tabcontent">
<ul>
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</div>
<div id="sc2" class="tabcontent">
<ul>
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</div>
<div id="sc3" class="tabcontent">
<ul>
<li><a id="link3-1" href="http://test.com">Link 3a</a></li>
<li><a id="link3-2" href="http://test.com">Link 3b</a></li>
</ul>
</div>
</DIV>

here's an example to point you in the right direction.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
ul, li
{
display: block;
}
.sublinks
{
display: none;
}
</style>
</head>
<body>
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1">
<a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
<ul class="sublinks">
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</li>
<li class="basictab1" id="li2">
<a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
<ul class="sublinks">
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<script>
$('.basictab1').hover(function()
{
$(this).find('ul').toggle();
});
</script>
</body>
</html>