I'm trying to use the mobile collapse navbar in Materialize CSS http://materializecss.com/navbar.html with UI router. But the hamburger? (menu 3-stripe) won't show the menu when I click on it
<i class="material-icons">menu</i>.
Is there a way to modify this so I can put this nav in the main page and have ui-router just load the partial pages?
I had the same issue. To solve it I initialize the JQuery plugin as suggested here: http://materializecss.com/side-nav.html#initialization
Code sample:
<script>
// Initialize collapse button
$(".button-collapse").sideNav();
</script>
<header>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" ui-sref="home" class="brand-logo">Mi Declaración</a>
<!-- desktop -->
<ul class="right hide-on-med-and-down">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="contact">Contáctanos</a></li>
</ul>
<!-- mobile -->
<ul id="nav-mobile" class="side-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="contact">Contáctanos</a></li>
</ul>
<a href="" class="button-collapse" data-activates="nav-mobile">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</header>
Related
This question already has answers here:
Bootstrap 4 Fixed top navbar shows collapsed and hides content
(4 answers)
Closed 4 years ago.
Using essentially the same css classes that are used on the twitter bootstrap site itself (and many other places), my horizontal navbar becomes vertical. I have the same div layout and classes (except the bs-* classes) as on the bootstrap page.
I hacked around this once by changing various settings from "block" to "inline" and such but there must be a better solution. Please advise.
Navbar html:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--
<div class = "navbar-header">
<a class = "navbar-brand"> Home </a>
</div>
-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Followers
</li>
<li>
Posts
</li>
</ul>
</div>
</div>
</nav>
This has been copied from bootstrap's navbar documentation. And hence it is responsive by default (show the preview in full-screen to by clicking Full page button on top right corner of the preview). If you don't require Branding to be there, you will just need to remove <a class="navbar-brand" href="#">Branding</a>.
More information about bootstrap 4's navbar can be found here - https://getbootstrap.com/docs/4.0/components/navbar/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Branding</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Followers<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</nav>
I am developing an app with the MEAN stack...and the question is...
How can I divide the interface of my app?
I have a static page(such a webpage) and an application page, the interface is different but the development that I have followed is...
In the file 'index.js' of my app, where I put all the dependencies and set the . In this file I have set the header and the footer of the static page for not repeat it in all the html files. It is working when I navegate above the static page, but when I am developing the app-page I want to change the main interface.
So, Must I repeat the code? or Can I set directives like ng-show to show each interface in each situation?
There I show you the mockups of my app:
Static:
Application:
The body target of my 'index.js' file:
<body>
<script>
$(document).ready(function(){
$('.button-collapse').sideNav();
});
</script>
<!-- The var changeInterface control if we are on main page or app page-->
<header>
<nav class="dipu-green">
<div class="nav-wrapper container" role="navigation">
<a id="logo-container" href="#" ui-sref="/()" class="" style="color:white" >
<b>R.U. Pino Montano</b>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#!/" style="color:white" >Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news" style="color:white">
Noticias</a>
</li>
<li>
<a href="#!/info" style="color:white">
Información</a>
</li>
<li>
<a href="#!/team" style="color:white">
Equipo</a>
</li>
<li>
<a href="#!/services" style="color:white">
Servicios</a>
</li>
<li>
<a href="#!/contact" style="color:white">
Contacto</a>
</li>
<li>
<a href="#!/app" style="color:white">
Resi App</a>
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a href="#!/">
<i class="material-icons">mood</i>Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news">
<i class="material-icons">new_releases</i>Noticias</a>
</li>
<li>
<a href="#!/info">
<i class="material-icons">info</i>Información</a>
</li>
<li>
<a href="#!/team">
<i class="material-icons">people</i>Equipo</a>
</li>
<li>
<a href="#!/services">
<i class="material-icons">business</i>Servicios</a>
</li>
<li>
<a href="#!/contact">
<i class="material-icons">contact_mail</i>Contacto</a>
</li>
<li>
<a href="#!/app">
<i class="material-icons">exit_to_app</i>Resi App</a>
</li>
</ul>
<a href="#" data-activates="nav-mobile" style="color:white" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</header>
<main>
<div class="ribbon">
<span>BETA</span>
</div>
<!-- el controlador se añade a una parte del body-->
<div class="section">
<div ui-view></div>
</div>
</main>
<footer class="page-footer dipu-green">
<div class="container">
<div class="row dipu-green">
<div class="col s12">
<div>
<h5>Contacto</h5>
<ul>
<li><i class="tiny material-icons">location_on</i> Avda. Alcalde Manuel del Valle nº 28</li>
<li>41008, Sevilla (España)</li>
<li><i class="tiny material-icons">account_balance</i> C.I.F.: XXXXX </li>
<li><i class="tiny material-icons">local_phone</i> Tel: XXX XXX XXX</li>
<li><i class="tiny material-icons">email</i> rupinomontano#gmail.com</li>
<li><i class="tiny material-icons">web</i> rupinomontano.com</li>
</ul>
</div>
</div>
<div class="col s12">
<div>
<h5>Desarrollo</h5>
</div>
</div>
<div class="col s12">
<h5>Síguenos en</h5>
<div id="social">
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<span style="margin-left:15%;">© 2018 Developed by </span>
</div>
</footer>
</body>
Thank you in advance!
As you are using angularjs, you can create a single page application.
answering to your qustions
Q: Must I repeat the code?
Ans - in angularjs you should not repeat your code, you maintain common part in one page and from that page you can render to diffrent page. this the beauty of single page application. to create a single page application you need routing. to achive routing in angular js you can use angular router package or you can use UI Router package.
please chack this example for angular router : https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider
please chack this example for UI router : https://scotch.io/tutorials/angular-routing-using-ui-router
Q: Can I set directives like ng-show to show each interface in each situation?
Ans - you should use routing directive. from these directive you can navigate to different page without reloading pages again again.
Pls can some help with this. View the website i'm working on on the mobile phone i observed the menu is showing without clicking the menu icon and covering my content. What can i do do solve this. Here is my code. I'm working with foundation 5
<!-- tab bar navigation -->
<nav class="tab-bar hide-for-medium-up">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Our Clients</li>
<li>Contact</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
Thanks
Here is your answer....
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right show-for-large-up">
<li class="active">Right Button Active</li>
<li class="has-dropdown not-click">
Right Button Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<ul class="right hide-for-large-up">
<li class="active">Right Button</li>
<li class="has-dropdown not-click">
Right Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left show-for-large-up">
<li>Left Button</li>
</ul>
</section></nav>
</div>
I am using Bootstrap and Angular and I have the following HTML:
<ul class="nav nav-tabs">
<li class="active"><a data-target="#" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I want to visualize both #tab1 and #tab2 when the "All" tab is clicked. How do I achieve this with Bootstrap and Angular?
I found the solution in this answer.
<ul class="nav nav-tabs">
<li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I just set the data-target of the "All" tab to a CSS class, that is present in all of my tabs. It doesn't have to be exactly 'tab-pane', you can use your own class - 'foo' or 'bar'. It's a nice and simple solution, as no external libraries are required to achieve this.
I am developing a mobile app using phone gap, for CSS i have used Twitter Bootstrap
I need a fixed header on the mobile, the below code does not work and the header is not fixed.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>some thing </li>
<li><a href="abc"><i class="icon-search icon-white"></i>
</a></li>
<li><i class="icon-home icon-white"></i>
</li>
<li><i class="icon-time icon-white"></i>
</li>
</ul>
</div>
</div>
</div>
I saw the below article, it says navbar-fixed-top does not work for mobile devices
any suggestion how could i get a fixed header,