logo
down
shadow

side menu with drop down menu


side menu with drop down menu

By : Pradip Bhagat
Date : November 25 2020, 09:00 AM
Any of those help This seems to be what you're looking for. I only added the first few lines in the CSS.
If you want it to open on click only and not on hover it requires javascript coding.
code :
body {
  background: black;
  color: white;
}

#menu nav > ul > li > ul {
    display: none;
    text-align: right;
}

#menu nav a {
    display: block;  
}

#menu nav > ul > li > a {
    display: block;  
    border-bottom: 3px solid transparent;  
}

#menu nav > ul > li:hover > a {
    border-bottom: 3px solid white;  
}

#menu nav > ul > li:hover > ul {
    display: block;  
}

#menu nav ul li  {
    font-size: 11px;
    top:106px;
    list-style-type: none;
    text-decoration: none;
    color:#ffffff;
    line-height: 19px;
}

nav a {
    color:rgb(153, 153, 153);
    text-decoration: none;
}
#mainSidebar {
    display: block;
    font-family:arial;
    font-size: 11px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 450px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    min-height: 750px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: fixed;
    text-transform: uppercase;
    vertical-align: baseline;   
}
#menu nav ul {
    padding: 0px;
    line-height: 11.5px;
    margin-top: 0px;    
    padding-bottom: 5px;
    width: 143px;
    padding-top: 5px;   
}
#menu nav ul li a:hover{
    color: #ffffff;
    /* text-decoration: underline; */
}
<div id="mainSidebar">
 <div id="menu">
  <nav>
     <ul>

      <li>
        <a href="#">SHOP</a>
        <ul>
          <li><a href="#">T-SHIRT</a></li>
          <li><a href="#">KNIT</a></li>
          <li><a href="#">SHIRT</a></li>
          <li><a href="#">PANTS</a></li>
          <li><a href="#">ACCESSORY</a></li>
        </ul>
      </li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
      <li><a href="#">LEGAL</a></li>
     </ul>
   </nav> 
  </div>    
 </div>
#menu nav > ul > li:hover > ul {
    display: block;  
}
$('#menu nav > ul > li > a').on('click', function() {
    $(this).siblings('ul').toggle();
});


Share : facebook icon twitter icon
How to hide drop down Menu when user clicked out side of drop down?

How to hide drop down Menu when user clicked out side of drop down?


By : François Deroubaix
Date : March 29 2020, 07:55 AM
wish helps you You dont have to use that much of code for the purpose, use like this,
code :
$(".menu").click(function (e) {
    e.stopPropagation();
    $(".menu_list").hide();
    $(this).next().show();

});
$(document).click(function (e) {

    $(".menu_list").hide();
});
$(".menu").click(function (e) {
    e.stopPropagation();
    $(".menu_list").not($(this).next()).hide();
    $(this).next().toggle();

});
$(".menu_list").find("li").click(function (e) {
    e.stopPropagation();
    alert($(this).text());
});
$(document).click(function (e) {

    $(".menu_list").hide();
});
How to display a sub menu to the side of a drop down menu

How to display a sub menu to the side of a drop down menu


By : Peter G.
Date : March 29 2020, 07:55 AM
hope this fix your issue I have a main menu bar that has a drop down menu and that menu has a sub menu. How do I get the sub drop down menu to display to the left of "drop down 2" link in the first drop down menu? I would also like to align the top of the sub menu to the top of the "drop down 2" link. Right now it's appearing below and to the left of the link. , Add this to the bottom of your stylesheet.
code :
.sub-dropdown{
  position: relative;
}
.sub-dropdown-menu{
  left: 100%;
  top: 0;
}
Conditionally Show or Hide Secondary Twitter-Bootstrap Drop-Menu Depending on Master Drop-Menu Selection

Conditionally Show or Hide Secondary Twitter-Bootstrap Drop-Menu Depending on Master Drop-Menu Selection


By : Hovot
Date : March 29 2020, 07:55 AM
This might help you To modify the visibility of an element, you can use jquery's .hide(), .show(), or .toggle()
You'll also have determine which item was clicked in a dropdown menu
code :
// handle click event on dropdown menu itmes
$('#category .dropdown-menu').on('click', 'li a', function(e) {
  
  // determine which item was selected
  var selText = $(this).text();
  
  // determine whether email box should be visible
  var showEmail = selText === "Email"

  // show/hide visilbility
  $('#box').toggle(showEmail);
});
#category, #box {
  margin: 10px;
}
#box {
    width: 200px;
    height: 100px;
    background: cornflowerblue;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="dropdown" id="category">
  <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" 
          type="button" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true">
    Pick Category
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Email</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

<div id="box" style="display: none;"> Email </div>
Drop-down menu item is not select-able if it is styled right side with in the menu

Drop-down menu item is not select-able if it is styled right side with in the menu


By : Pavithra
Date : March 29 2020, 07:55 AM
Showing active menu on a drop down side menu on Bootstrap (AdminLTE)

Showing active menu on a drop down side menu on Bootstrap (AdminLTE)


By : Anitta
Date : March 29 2020, 07:55 AM
will help you /** Try this ** > for sidebar and treeview menu in adminLTE, it will add active when clicked and remove any previous active class /** to add active class and remove previously clicked menu */
Related Posts Related Posts :
  • CRM 2013 Limit the date field
  • fancybox - changing close button color
  • Ember-notify giving error can't read property "Service" of undefined
  • Passport-init.js authentication is not working in nodejs
  • Branch.io Cordova API - init() fails on Android Device
  • appending HTML codes to an elements using js
  • Css animation to extend button text on hover
  • I want to restrict HTML input autocomplete to 3 letter minimum
  • tinyMCE editor not updating on the fly
  • typescript kendo-ui call method from string
  • HttpCompileException was unhandled by user code (when i am adding c# code in script)
  • Send form data as array of objects to controller in asp.net mvc
  • Javascript, multi file modules and Require.Js
  • how to render a complete new template and leave the application template in ember
  • Hover unrelated divs
  • Permute string until it matches some input?
  • How to fire JQuery change event when input value changed programmatically?
  • AJAX: POST data to a different url
  • checkbox column in jquery datatable
  • Document.evaluate for documents without namespaceURI crashes Microsoft Edge
  • Bootstrap Menu with "More" option Responsive issue
  • Standard inputs not being added to Angularjs Form $Scope
  • Express promise throw error
  • onclick and get in jquery
  • How to get the country code from Google Places API
  • Passing parameters url in Select2
  • Is there any frame work for Marklogic to write javascript code?
  • How to implement a boostrap template over bootstrap-sass gem
  • Why fixed div comes out when horizontally scrolled?
  • How to limit scope of a function in javascript/ jquery
  • Overlapping legend d3.js
  • Apply transition to div
  • Javascript game help - counting with dice
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co