Dinamic Menu with Angularjs

Developer
Harley Santos Garzón
Size
8,841 Kb
Views
16,192
  1. Dinamic Menu with Angularjs Previews
  2. Dinamic Menu with Angularjs HTML Codes
  3. Dinamic Menu with Angularjs CSS Codes
  4. Dinamic Menu with Angularjs JS Codes

How do I make an dinamic menu with angularjs?

What is a dinamic menu with angularjs? How do you make a dinamic menu with angularjs? This script and codes were developed by Harley Santos Garzón on 15 October 2022, Saturday.

Dinamic Menu with Angularjs Previews
IQ Test

Dinamic Menu with Angularjs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dinamic Menu with Angularjs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body ng-app="api" ng-controller="ctrl"> <header> <div class="header_container"> <div class="col s3"> <h1 class="logo">header</h1> </div> <div class="col menu__container"> <ul class="menu"> <li ng-repeat="menu in main_menu" ng-click="visible($event)"><a href="">{{menu.texto}}</a> <div class="sub_menu" ng-class=""> <div class="sub_menu-item" ng-repeat="sub in menu.sub_menu"><a class="sub_menu-item--link" href="{{sub.link}}">{{sub.item}}</a></div> </div> </li> </ul> </div> </div> </header> <main> <div class="main_container"> <!--section(ng-init='mostrar = 1') .row	button(ng-click='mostrar = 1') uno	button(ng-click='mostrar = 2') dos article.col.s6(ng-show='mostrar == 1')	p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quo placeat fugit facere excepturi fuga in quod similique quaerat. uno XXXXXXXXXXX article.col.s6(ng-show='mostrar == 2')	p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quo placeat fugit facere excepturi fuga in quod similique quaerat. dos YYYYYYYYYYYY --> <section ng-repeat="section in contenidos"> <h1 id="{{section.id}}">{{section.titulo}}</h1> <article ng-repeat="a in section.parrafo"> <p>{{a.item1}}</p> <p>{{a.item2}}</p> <p>{{a.item3}}</p> <p>{{a.item4}}</p> <p>{{a.item5}}</p> <p>{{a.item6}}</p> <p>{{a.item7}}</p> <p>{{a.item8}}</p> <p>{{a.item9}}</p> <p>{{a.item10}}</p> <p>{{a.item11}}</p> </article> <article class="mt30"> <p>{{section.impacto}}</p> </article> <article class="mt30"> <p><small>{{section.referente}}</small></p> </article> </section> </div> </main> <footer></footer>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dinamic Menu with Angularjs - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato);
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; font-weight: normal; font-family: Lato; -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -o-transition: all 350ms ease; -ms-transition: all 350ms ease; transition: all 350ms ease;
}
* > *, * * { -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -o-transition: all 350ms ease; -ms-transition: all 350ms ease; transition: all 350ms ease;
}
ul li { list-style: none;
}
/*Clase base: A partir de 320px*/
@media all and (min-width: 320px) { /*Grilla tipo Bootstrap */ .base1, .col.base1 { width: 8.33333%; } .base2, .col.base2 { width: 16.66667%; } .base3, .col.base3 { width: 25%; } .base4, .col.base4 { width: 33.33333%; } .base5, .col.base5 { width: 41.66667%; } .base6, .col.base6 { width: 50%; } .base7, .col.base7 { width: 58.33333%; } .base8, .col.base8 { width: 66.66667%; } .base9, .col.base9 { width: 75%; } .base10, .col.base10 { width: 83.33333%; } .base11, .col.base11 { width: 91.66667%; } .base12, .col.base12 { width: 100%; }
}
/*Clase s: A partir de 480px*/
@media all and (min-width: 480px) { /*Grilla tipo Bootstrap */ .s1, .col.s1 { width: 8.33333%; } .s2, .col.s2 { width: 16.66667%; } .s3, .col.s3 { width: 25%; } .s4, .col.s4 { width: 33.33333%; } .s5, .col.s5 { width: 41.66667%; } .s6, .col.s6 { width: 50%; } .s7, .col.s7 { width: 58.33333%; } .s8, .col.s8 { width: 66.66667%; } .s9, .col.s9 { width: 75%; } .s10, .col.s10 { width: 83.33333%; } .s11, .col.s11 { width: 91.66667%; } .s12, .col.s12 { width: 100%; }
}
/*Clase m: A partir de 768px*/
@media all and (min-width: 768px) { /*Grilla tipo Bootstrap */ .m1, .col.m1 { width: 8.33333%; } .m2, .col.m2 { width: 16.66667%; } .m3, .col.m3 { width: 25%; } .m4, .col.m4 { width: 33.33333%; } .m5, .col.m5 { width: 41.66667%; } .m6, .col.m6 { width: 50%; } .m7, .col.m7 { width: 58.33333%; } .m8, .col.m8 { width: 66.66667%; } .m9, .col.m9 { width: 75%; } .m10, .col.m10 { width: 83.33333%; } .m11, .col.m11 { width: 91.66667%; } .m12, .col.m12 { width: 100%; }
}
/*Clase t: A partir de 992px*/
@media all and (min-width: 992px) { /*Grilla tipo Bootstrap */ .t1, .col.t1 { width: 8.33333%; } .t2, .col.t2 { width: 16.66667%; } .t3, .col.t3 { width: 25%; } .t4, .col.t4 { width: 33.33333%; } .t5, .col.t5 { width: 41.66667%; } .t6, .col.t6 { width: 50%; } .t7, .col.t7 { width: 58.33333%; } .t8, .col.t8 { width: 66.66667%; } .t9, .col.t9 { width: 75%; } .t10, .col.t10 { width: 83.33333%; } .t11, .col.t11 { width: 91.66667%; } .t12, .col.t12 { width: 100%; }
}
/*Clase l: A partir de 1200px*/
@media all and (min-width: 1200px) { /*Grilla tipo Bootstrap */ .l1, .col.l1 { width: 8.33333%; } .l2, .col.l2 { width: 16.66667%; } .l3, .col.l3 { width: 25%; } .l4, .col.l4 { width: 33.33333%; } .l5, .col.l5 { width: 41.66667%; } .l6, .col.l6 { width: 50%; } .l7, .col.l7 { width: 58.33333%; } .l8, .col.l8 { width: 66.66667%; } .l9, .col.l9 { width: 75%; } .l10, .col.l10 { width: 83.33333%; } .l11, .col.l11 { width: 91.66667%; } .l12, .col.l12 { width: 100%; }
}
/*Clase xd: A partir de 1300px*/
@media all and (min-width: 1300px) { /*Grilla tipo Bootstrap */ .xd1, .col.xd1 { width: 8.33333%; } .xd2, .col.xd2 { width: 16.66667%; } .xd3, .col.xd3 { width: 25%; } .xd4, .col.xd4 { width: 33.33333%; } .xd5, .col.xd5 { width: 41.66667%; } .xd6, .col.xd6 { width: 50%; } .xd7, .col.xd7 { width: 58.33333%; } .xd8, .col.xd8 { width: 66.66667%; } .xd9, .col.xd9 { width: 75%; } .xd10, .col.xd10 { width: 83.33333%; } .xd11, .col.xd11 { width: 91.66667%; } .xd12, .col.xd12 { width: 100%; }
}
.row { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex;
}
.col { position: relative; float: left; margin: 0; padding-left: 7.5px; padding-right: 7.5px; min-height: 1px;
}
.col.total, .col.full { float: none; display: table;
}
.col:before, .col:after { content: ""; display: table; clear: both;
}
body { height: 100%; background-color: whitesmoke; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between;
}
body header { position: fixed; z-index: 200; width: 100vw; height: 60px; flex: 1; background-color: darkturquoise; box-shadow: 0px 0px 9px 2px #BDBDBD; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease;
}
body header .logo { margin: 0 auto; height: 60px; color: white; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center;
}
body header .menu__container { float: right; width: 300px;
}
body header .menu__container:before, body header .menu__container:after { content: ""; display: table; clear: both;
}
body header .menu { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; min-width: 50%; width: 100%; max-width: 100%; height: 60px; margin: 0; float: right;
}
body header .menu li { padding: 10px; width: 100%; height: 100%; text-align: center; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center;
}
body header .menu li:hover { background-color: #fff;
}
body header .menu li:hover a { color: lightseagreen;
}
body header .menu li a { color: white;
}
body header .menu li .sub_menu { position: absolute; text-align: left; min-width: 200px; height: 0; min-height: 0; opacity: .95; background-color: snow; top: 60px; right: 0; z-index: 199; padding: 0; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; -o-transition: all 100ms ease; -ms-transition: all 100ms ease; transition: all 100ms ease; box-shadow: 0px 3px 4px 0px #e6e6e6;
}
body header .menu li .sub_menu-item { width: 100%; margin: .5px 0; min-height: 0; height: 0; float: left; background-color: white; box-shadow: 0px 3px 4px 0px #e6e6e6; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; -o-transition: all 100ms ease; -ms-transition: all 100ms ease; transition: all 100ms ease;
}
body header .menu li .sub_menu-item--link { width: 100%; height: 100%; display: block; cursor: pointer; padding-left: 5px; padding-top: 0; color: darkturquoise; overflow: hidden; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; -o-transition: all 100ms ease; -ms-transition: all 100ms ease; transition: all 100ms ease;
}
body header .menu li .sub_menu.cerrado { -webkit-transition: all 1ms ease; -moz-transition: all 1ms ease; -o-transition: all 1ms ease; -ms-transition: all 1ms ease; transition: all 1ms ease; height: 0;
}
body header .menu li .sub_menu.visible { -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; -o-transition: all 100ms ease; -ms-transition: all 100ms ease; transition: all 100ms ease; height: auto;
}
body header .menu li .sub_menu.visible .sub_menu-item { min-height: 40px; height: 0;
}
body header .menu li .sub_menu.visible .sub_menu-item .sub_menu-item--link { padding-top: 5px;
}
body main { min-height: 100vh; height: auto; flex: 8; padding: 80px 20px; background-color: snow;
}
body main section { padding-top: 60px;
}
body main section:first-child { padding-top: 0px;
}
body main section:first-child h1 { margin-top: 0;
}
body main section p { text-align: justify;
}
body footer { height: 40px; flex: 1; background-color: lightslategray;
}
body .main_container, body .header_container { width: 90%; margin: auto; position: relative;
}
.ng-hide { opacity: 0;
}
.ng-hide-add, .ng-hide-remove { -webkit-transition: all 0 ease; -moz-transition: all 0 ease; -o-transition: all 0 ease; -ms-transition: all 0 ease; transition: all 0 ease;
}
.ng-hide-add, .ng-hide-remove { -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -o-transition: all 350ms ease; -ms-transition: all 350ms ease; transition: all 350ms ease;
}
.ng-hide-add { opacity: 0;
}
.ng-hide-remove { opacity: 1;
}
.mt10 { margin-top: 10px;
}
.mt20 { margin-top: 20px;
}
.mt30 { margin-top: 30px;
}
.mt40 { margin-top: 40px;
}

Dinamic Menu with Angularjs - Script Codes JS Codes

var app = angular.module("api",[]);
app.controller("ctrl",function($scope){	$scope.main_menu = [ { "id" : "1", "texto": 'Home', "sub_menu": [ { 'item': 'Home', 'link': '#home' }, { 'item': 'lorem ipsum soy item 2', 'link': 'https://www.google.com' }, { 'item': 'lorem ipsum soy item 2', 'link': 'https://www.google.com' }, { 'item': 'lorem ipsum soy item 4', 'link': 'https://www.google.com' } ] }, { "id" : "2", "texto": 'item ', "sub_menu": [ { 'item': 'lorem ipsum soy item 1', 'link': 'https://www.google.com' }, { 'item': 'lorem ipsum soy item 2', 'link': 'https://www.google.com' } ] }, { "id" : "3", "texto": 'item ', "sub_menu": [ { 'item': 'lorem ipsum soy item 1', 'link': 'https://www.google.com' }, { 'item': 'lorem ipsum soy item 2', 'link': 'https://www.google.com' }, { 'item': 'lorem ipsum soy item 2', 'link': 'https://www.google.com' } ] }, { "id" : "4", "texto": 'Contacto', "sub_menu": [ { 'item': 'Contacto', 'link': '#contacto' } ] } ];	$scope.contenidos = [ { "id":'home' , "titulo":'Pregunta' , "parrafo":[ { 'item1': '¿Determinar desde una perspectiva analítica los principales elementos de la carta de Jamaica, discurso de Angustura, congreso de panama y el pensamiento de José marti considerando el impacto de estos aportes a la actual dinámica integración a latinoamerica?' , 'item0': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta neque praesentium tenetur repellat, rerum debitis culpa hic ratione. Eos perspiciatis dicta quos vitae quidem harum iste quam debitis, veritatis deserunt accusamus hic culpa, dignissimos voluptates, cupiditate amet. Voluptatum ut quo, explicabo odio error quod enim obcaecati provident nesciunt unde, amet.' } ] }, { 'id':'dos' , 'titulo':'Carta a Jamáica', "parrafo":[ { 'item1': 'Escrito en 1815 ' , 'item2': 'Representa el pensamiento de Bolivar y plantea las bases de la estructura política de nuestro país' , 'item3': 'Lo escribe estando exiliado en Jamaica y con varios intentos de asesinatos.' , 'item4': 'Pide separación de españa, ya no hay forma de seguir con ellos y mantener alguna relación políica y cultural.' , 'item5': 'Propone constituir una constitución republicana, debemos rechazar toda monarquia.' , 'item6': 'Plantea la creación de una unidad continental, ya que es difícil mantener una lucha con el imperio.' } ] , "referente": 'Canal youtube En las Mañanas con Uno, vídeo 200 años de la carta de Jamaica' , "impacto": 'Siente un profunda rabia sobre la actitud de españa sobre la colonia, hace una análisis y un resumen del estado de los pueblos del nuevo mundo. Expresa un respeto hacia el imperio español, pero defiende en sus palabras a la nueva granada y a todos los pueblos' }, { 'id':'tres' , 'titulo':'Discurso de angustura' ,"parrafo":[ { 'item1': '1819, simon bolivar presenta un discurso donde presenta las ideas para una república perfecta.' , 'item2': 'Analizó las constituciones de Grecia, Roma, inglatera y Estados unidos.' , 'item3': 'Propone un gobierno centralista, basado en las 3 ramas judiciales (ejecutiva, legislativa, judicial) , y una cuarta llamada poder moral.' , 'item4': 'La rama del poder moral busca enseñarle a los ejecutivos a ser cultos e intelectuales.' , 'item5': 'El discurso basaba las propuestas , pribilegioas al ciudadano y la abolición de la esclavitud.' , 'item6': 'Da importancia al respeto y a la educación.' } ] , "referente": 'Vídeo: Discurso de angustura, link: https://www.youtube.com/watch?v=o17xijC5330' , "impacto": 'Simón Bolivar establece unas bases solidad para la construcción de un país con 3 principales pilares, las ramas ejecutiva, judicial y legislativa' }, { 'id':'cuatro' , 'titulo':'Congreso de Panamá' ,"parrafo":[ { 'item1': 'Lo que sucede en el congreso es practicamente la culminación del sueño de Bolivar, la integración de los pueblos.' , 'item2': 'Bolivar instalo el congreso Anfictionico y se inpiro de los griegos para tratar asuntos generales.' , 'item3': 'Los resultados del congreso no era lo que esperaba Bolivar.' , 'item4': 'Los documentos firmados por los asistentes sirvieron para que actualmente funcione la organización de estados americanos.' , 'item5': '' , 'item6': '' } ] , "referente": 'Vídeo: La Máquina del Tiempo - Capítulo 48 Congreso de Panamá, link: https://www.youtube.com/watch?v=tmaFwW15Tp8' , "impacto": '' }, { 'id':'contacto' , 'titulo':'Contacto' } ];	$scope.visible = function(val){	var menu = angular.element(document.querySelectorAll('.menu'));	// var sub_menu = menu.next('.sub_menu');	var menu_list = menu.find('li');	var allEl = angular.element(document.querySelectorAll('.sub_menu'));	var thisEl = angular.element(val.currentTarget);	var children = thisEl.find('.sub_menu');	var link = children.find('.link');	// alert(thisEl);	if(!children.hasClass('visible')){	allEl.removeClass('visible');	children.addClass('visible');	} else {	allEl.removeClass('visible');	}	};
});
Dinamic Menu with Angularjs - Script Codes
Dinamic Menu with Angularjs - Script Codes
Home Page Home
Developer Harley Santos Garzón
Username HarleySG
Uploaded October 15, 2022
Rating 3
Size 8,841 Kb
Views 16,192
Do you need developer help for Dinamic Menu with Angularjs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Harley Santos Garzón (HarleySG) Script Codes
Name
Scroll Up With Js and Css
Sortable grid
Gallery Custom Javascript - Jquery
Simple Exercise angular app
Gestor de Actividades con Jquery y Materialize
Snow machine
Hangman
Angular-deckgrid - Like Pinterest Layout
Custom Controls like Youtube for HTML5 Videos
Template page
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!