myMenu
Un script que crea menus bien chidos
by Edgar Martinez
HTML
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div id='con'>
<ul>
<li mymenu-action='unAlerta("hola")'>OPCION1</li>
<li mymenu-title='Visitanos' mymenu-icon='ri-home-4-fill' mymenu-link='www.google.com'>OPCION2</li>
<li mymenu-submenu='true' mymenu-label='OPCION3'>
<ul>
<li mymenu-link='www.yahoo.com'>SUBMENU</li>
<li mymenu-link='www.ELKAIRO.com'>SUBMENU2</li>
</ul>
</li>
<li mymenu-action='unAlerta("mundo")'>OPCION4</li>
</ul>
</div>
<div id='con2'>
</div>
JavaScript
var myMenu = function() {
return {
Propiedades: ["mymenu-action", "mymenu-title", "mymenu-icon", "mymenu-link", "mymenu-submenu", " mymenu-label","mymenu-link-target"],
$el: null,
divName:"",
id: -1,
config: {
width: "100px",
height: "300px",
title: "My Menu",
IconBurger:{
icon:"",
iconOpen:"ri-menu-fold-line",
top: "10px",
left: "1%"
},
jMenu: {}
},
removeClass:function(classname,el){
if(classname==""){ return false; }
//if(typeof(el.classList)=="undefined"){return false;}
el.classList.remove(classname);
},
toogleClass:function(classname,el){
if(classname==""){ return false; }
if(el.classList.contains(classname)){
el.classList.remove(classname);
}else{
el.classList.add(classname);
}
},
defaultIconB:function(){
var cargar_lib=false;
var elmentCSS= document.querySelectorAll('[rel="stylesheet"]');
for(var i in elmentCSS){
if(isNaN(i)){continue;}
var actualLink=elmentCSS[i];
var link=actualLink.href
if(link.indexOf("remixicon")>-1){
cargar_lib=true;
}
}
if(this.config.IconBurger.icon==""){
if(cargar_lib){
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css';
link.media = 'all';
head.appendChild(link);
}
return "ri-menu-line";
}else{
return this.config.IconBurger.icon;
}
},
loadstyle:function(){
var style = {
".mymenu_submenu":{
height: "100px"
},
".mymenu .btn": {
position: "absolute",
top: this.config.IconBurger.top,
left: this.config.IconBurger.left,
height: "37px",
width: "37px",
"text-align": "center",
background: "#1b1b1b",
"border-radius": "3px",
cursor:...