<div class="mdl-layout__drawer">
<span class="mdl-layout-title">SITE NAME</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
Hi i am trying to figure out how I get this menu to ALWAYS (unless mobile) lock inside the users view, and for the site grid to resize. but one step at a time how do I get this to lock (so users can't close or open)
Please check the below code. Dictation of fixed drawer should be in a div class above the drawer. It was taken from the MDL page, https://getmdl.io/components/index.html#layout-section/layout
and look under fixed header, there is also a code pen available.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</div>
</main>
</div>
Related
// Change positioning of mobile menu icon based on screen size.
$(document).ready(function(){
if($(window).width()<768)
{
$('button#mobile-nav').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('button#mobile-nav').css('float','left');
}
});
});
<header class="nav">
<nav class="navbar navbar-default navbar-fixed-top navbar-color" role="navigation">
<div class="container-fluid">
<div class="navbar-header mobile-nav-header">
<button id="mobile-nav" type="button" class="navbar-toggle" role="button" aria-label="Toggle Navigation" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-right" id="facebook-mobile">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- navbar-header mobile-nav-header -->
<div class="collapse navbar-collapse text-uppercase" id="navbar">
<ul class="nav navbar-nav">
<li><a title="Welcome" class="glyphicon glyphicon-home" href="index.php"><span class="hidden">Home</span></a></li>
<li><a title="About" target="_self" href="#about">About</a></li>
<li><a title="Service" target="_self" href="#services">Services</a></li>
<li><a title="Address" target="_self" href="#location">Location</a></li>
<li><a title="Gallery" target="_self" href="gallery.php">Gallery</a></li>
<li><a title="Contact" target="_self" href="contact.php">Contact</a></li>
</ul>
<div class="navbar-right" id="facebook-desktop">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- #navbar -->
</div> <!-- container-fluid -->
</nav>
</header>
I have a mobile menu created with Bootstrap 3 that automatically aligns to the right side of screen. I wrote some JavaScript code to make mobile menu icon appear on the left side of screen because I have a Facebook button on the right side of screen. Everything works with my code; however, there is one area I'm trying to improve. On my gallery page I have 500+ images. The problem is my mobile menu stays on right side and pushes the Facebook button slightly over to the left until the page fully loads. After the page fully loads everything appears correctly. How can I correct this so the mobile menu always appears on the left side immediately? Thanks!
I have attached a couple images to reference what I'm trying to explain. Tried uploading a video, but videos are not allow on this site.
On the gallery page only, when the page first loads, it initially looks like the attached image named "before-page-loads.png". Once the page is loaded it displays correctly and looks like the image in "after-page-loads.png".
before-page-loads.png
after-page-loads.png
I have also provided my JavaScript and HTML code.
Thanks for your help!
I am using a free html5 theme to build on for a website and need a bit of help with the Navbar Hover function. To view the original html5 theme go to" http://www.templatemo.com/free-website-templates/430-robotic
The theme is a onepage theme however I am converting into a multipage theme. Originally in the theme you would click a menu item and it would scroll down the page to that content but I want it to open the new page in same window for that content. The way a normal site would do so. Below is a HTML and CSS.
HMTL
<div class="templatemo_menu">
<div class="templatemo_socialmedia">
<div class="templatemo_social">
<a href="http://www.Facebook.com/GreenHouseEffectUSA">
<img src="images/facebook.png" alt="templatemo facebook">
</a>
</div>
<div class="templatemo_social">
<a href="https://twitter.com/greenhouse_usa">
<img src="images/twitter.png" alt="templatemo twitter">
</a>
</div>
<div class="templatemo_social">
<a href="#">
<img src="images/youtube.png" alt="templatemo youtube">
</a>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" wp-nav-menu="Primary" wp-nav-menu-type="bootstrap">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DONATE
</li>
<li>
VOLUNTEER
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Try moving the classes to the div rather than the ul
:)
I'm using Material Design Lite in my first React app, the layout are basically this:
http://codepen.io/anon/pen/PqBJPW
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</body>
</html>
My components in react are like this:
Inside menu and header I have a "Title", this is to set page title (like document.title). But, how I can set this?
My structures of components are:
Header+Menu
Page components
But every "Page components" has unique title. Can I set state in children (Page content) components and read em parent component (header+menu)?
I suggest following the structure of your template html:
One top level "page" component which renders the mdl block:
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
With 3 child components corresponding with __header, __drawer, and __content elements, plus child components therein as necessary.
That way "page" state such as the current menu item, the corresponding page title + heading, and the body content to render, can be tracked in a component which is concerned with the page as a whole, and the details are passed as props to the children.
My navbar's toggle button refuses to work. The code I'm using has been copied and pasted from a Bootstrap template with a fully functional navbar. I don't know what's up.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
Downloads
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here's the script tags to the JavaScript and jQuery files. They've been left unmodified.
<!-- jQuery -->
<script src="js/jquery.js" />
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js" />
You didn't identify anything to drop down. You need a list of things, using an unordered list. All you have is the names of the buttons. Please see bootstraps example below:
http://getbootstrap.com/components/#btn-dropdowns
I created a drop-down menu in Jquery and it's working perfectly but I have only one problem with the positioning of the menu. I created the menu right after I learned about jquery animations and I'm still a beginner so I didn't follow any tutorials.
So I was wondering how can I put the menu right under the button?
<div id="nav" class="grid_5">
ABOUT
<a id="products" href=""> PRODUCTS </a>
HOME
</div>
<div id="menu">
<a class="menuButton" href=""> Cakes </a><br>
<a class="menuButton" href=""> Cupcakes </a><br>
<a class="menuButton" href=""> Fudges </a><br>
<a class="menuButton" href=""> Ice Creams </a><br>
<a class="menuButton" href=""> Hard Candies </a>
</div>
The menu is set under the button using an absolute position.
Here is how the site looks while full screen:
Here is how the site looks while windowed:
I would like to learn how to do this with JQuery/JScript or CSS.
You're having that problem because the menu is being position relative to the body so as the window width changes the position of the menu moves. To solve this problem you want to place your link and menu in an element with position: relative on it.
This will then mean that you can absolute position your menu relative to the container its in. So something like
<div style="position: relative">
<div id="nav" class="grid_5">
ABOUT
<a id="products" href=""> PRODUCTS </a>
HOME
</div>
<!-- When you position this absolutely it will now be relative to the container -->
<div id="menu">
<a class="menuButton" href=""> Cakes </a><br>
<a class="menuButton" href=""> Cupcakes </a><br>
<a class="menuButton" href=""> Fudges </a><br>
<a class="menuButton" href=""> Ice Creams </a><br>
<a class="menuButton" href=""> Hard Candies </a>
</div>
Obviously it's better not to use inline styles and instead apply a class to the container
Wrap nav and menu div in a div and apply the position relative by which your menu div position would work accordingly:
<div class="relative">
<div id="nav" class="grid_5">
ABOUT
<a id="products" href=""> PRODUCTS </a>
HOME
</div>
<div id="menu">
<a class="menuButton" href=""> Cakes </a><br>
<a class="menuButton" href=""> Cupcakes </a><br>
<a class="menuButton" href=""> Fudges </a><br>
<a class="menuButton" href=""> Ice Creams </a><br>
<a class="menuButton" href=""> Hard Candies </a>
</div>
</div>
css:
.relative{
position: relative;
}