I know Materialize.css has an option to swipe left to dismiss the open sidemenu, but is it possible to open the menu by swiping right as found in most android phones.
I have a meteor.js implementation for a android app and would want to know if such a feature offered out of the box.
Yes, it's possible right out of the box:
Just initialize the plugin like this:
// Initialize collapse button
$(".button-collapse").sideNav();
Demo in Plunker
Demo in Stack Snippets
$(".button-collapse").sideNav();
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.js"></script>
<nav>
<ul class="right hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
For testing, just enable emulation in the chrome developer tools, reload the page, and swipe in from the edge.
Related
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
I've tried a few tricks to try and move the menu on the left, but none of the regular classes appears to be fit to toggle this option, especially on mobile devices (which is what I'm designing for).
Is there a mobile device CSS fix for this? (note I've already got "class='left'" on the menu area).
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><span></span></li>
<li class="name">
<h1><img style="width: 150px;"src="yourmomslogo.png"></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active">Login</li>
<li>Your Cats</li>
</ul>
</section>
</nav>
Let see the doc
If you change left by right in this code
<ul class="left">
<li>Left Nav Button</li>
</ul>
You can see the link goes to the right, so the left class changes the position of the link (so the menu for you)
I want to put the menu-icon on the left hand side of the nav bar when it goes into mobile. For the life of me, I can't find any documentation how to do this. If tried putting the code in different place and using floats with custom CSS but can't get it to budge, is it possible?
Here is my code:
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left">
<li class="active">Home</li>
<li class="divider"></li>
<li class="active">Archives</li>
<li class="divider"></li>
<li class="active">Contact Us</li>
</ul>
</section>
add this to your css
.top-bar .toggle-topbar{
left:0px
}
Default css has right:0px
I'm trying show the description of parent menu in submenu.
I have something like that
<nav>
<ul nav-menu>
<li><a>item 1</a></li>
<li><a>item 2</a>
<div class="dropdown">
<span> $DESCRITPION_OF_ITEM_2</span>
<ul sub-menu>
<li>..</li>
<li>..</li>
<ul>
</div>
</ul>
</nav>
I need showing this variable "$DESCRITPION_OF_ITEM_2" which showing the description from menu editor in wordpress, is it possible ?
And second question, do you know good plugins or something for adding image to menu ?
Thank;s for response
I think this might be what you are looking for.
I'm using the dropdown from
http://www.lwis.net/free-css-drop-down-menu/
My menu has Home|About|Register|Login
I would like the menu to look like
Home|About|Register|Login<-----------------stretch till end ----------------->
What i'm doing now is create an extra li and add " " to it. The code is as below
<div id="mymenu">
<ul class="dropdown dropdown-horizontal">
<li class="first">Home</li>
<li>About</li>
<li>Register</li>
<li>Login</li>
<li class="last"><span> </span></li>
</ul>
</div>
Is there a better way to do this?
Also how do i highlight choosen menu item like for example if i click home the menu home should be highlighted.