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>
Related
I have many tabs in my showDialog, when I set tab_2 as active, the content shows nothing which is strange.
<div class="portlet-body">
<div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
<ul class="nav nav-tabs nav-tabs-lg">
<li id="li_tab_1">
<a data-toggle="tab" href="#" data-target="#tab_1">
MyTab1
</a>
</li>
<li id="li_tab_2" class="active">
<a data-toggle="tab" href="#" data-target="#tab_2">
MyTab2
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab_1" class="tab-pane fade meter-tabs-height">
<div ng-include="'mytab1.html'"></div>
</div>
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
</div>
</div>
</div>
When I firstly come into the dialog, the dialog shows MyTab2 with no content at all.
However, when I click MyTab1 and then reclick MyTab2, the content appears.
How does this happen and how could I handle this problem?Thank you.
I have made a mistake in my code, just add class="active" could resolve it.
Replace
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
with
<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
<div ng-include="'mytab2.html'"></div>
</div>
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.
I'm trying to include two submenu inside a sidebar. However, I have not been getting consistent result for the dropdown. On my 10 attempts of loading/refreshing, the sub-menu drop down only works 4/10 times. Does anyone have an idea why it is producing such results?
There's no error on console either.
Also, I'm using AngularJS to include this sidebar into my main html code.
Code for Sidebar, sidebar.html
<div class="col-md-2"><!--grid 2 for bootstrap -->
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-home"></i> Dashboard</li>
<br>
<li><i class="glyphicon glyphicon-calendar"></i> Calendar</li>
<br>
<li><i class="glyphicon glyphicon-stats"></i> Stats</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> List
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 1</li>
<li>Sub Function 2</li>
<li>Sub Function 3</li>
<li>Sub Function 4</li>
</ul>
</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> Function 5
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 5</li>
<li>Sub Function 6</li>
<li>Sub Function 7</li>
</ul>
</li>
</ul>
</div>
</div>
AngularJS part to incldue sidebar
<!--Include header-->
<div ng-include src="'views/templates/header.html'"></div>
<!--end of header-->
<div class="page-content">
<div class="row">
<!-- Insert Side bar-->
<div ng-include src="'views/templates/sidebar.html'"></div>
<div class="col-md-10"><!--Main content -->
<div class="row">
<!-- to display content here -->
</div>
</div>
</div>
</div>
Not sure what went wrong.
I am developing with angular an admin, and resources I'm using Angular Material sidenav.
I could make the menu work 50%, can not do the toggle function normally.
Test case, click several times on the toggle menu it opens :D
<header class="nav-header">
<a ng-href="#/" class="docs-logo">
<h1 class="docs-logotype md-heading">Angular Material</h1>
</a>
</header>
<ul class="skip-links">
<li class="md-whiteframe-z2">
<md-button ng-click="focusMainContent($event)" href="#">Skip to content</md-button>
</li>
</ul>
<md-content flex role="navigation">
<ul class="docs-menu">
<li ng-repeat="sectionmenu in menu.sections" class="parent-list-item {{sectionmenu.className || ''}}" ng-class="{'parentActive' : isSectionSelected(sectionmenu)}">
<h2 class="menu-heading md-subhead" ng-if="sectionmenu.type === 'heading'" id="heading_{{ sectionmenu.title | nospace }}">
{{sectionmenu.title}}
</h2>
<menu-link sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'link'"></menu-link>
<menu-toggle sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'toggle'"></menu-toggle>
</li>
</ul>
</md-content>
</md-sidenav>
Follows a problem Plunker:
http://embed.plnkr.co/fq3tonZoddSSZkyAaWD8/preview
Editable Plunker:
http://plnkr.co/edit/FQcZrwYlh4LPKuje9mLI?p=preview
UPDATED and RESOLVED:
In template menu-toggle.tpl.html, change this:
<ul ng-show="isOpen()" id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>
for this:
<ul id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>
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>