Click to see how it works
without header
men3 principalmen3 responsive

Menu

Hide This

Sección 1

Inspeccionar en responsive para ver todo el funcionamiento.

Sección 2

Sección 3

Sección 4

Sección 5

Sección 6

Sección 7

eyJzb3VyY2UiOiJodHRwczovL3RlbXBsYXRlcy5veHlnZW5hZG9zLmNvbSIsImNvbXBvbmVudCI6W3siaWQiOjIyLCJuYW1lIjoiY3Rfc2VjdGlvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjIyLCJjdF9wYXJlbnQiOjEwMDAyNiwic2VsZWN0b3IiOiJzZWN0aW9uLTIyLTkwNCIsIm9yaWdpbmFsIjp7InBvc2l0aW9uIjoicmVsYXRpdmUiLCJjb250YWluZXItcGFkZGluZy1ib3R0b20iOiIwIiwiY29udGFpbmVyLXBhZGRpbmctdG9wIjoiMCIsImNvbnRhaW5lci1wYWRkaW5nLWxlZnQiOiIwIiwiY29udGFpbmVyLXBhZGRpbmctcmlnaHQiOiIwIiwic2VjdGlvbi13aWR0aCI6ImZ1bGwtd2lkdGgiLCJhbGlnbi1pdGVtcyI6ImNlbnRlciIsImp1c3RpZnktY29udGVudCI6ImNlbnRlciIsImFsaWduLWNvbnRlbnQiOiJjZW50ZXIifSwibmljZW5hbWUiOiJTZWNjaW9uIFByaW5jaXBhbCIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZX0sImRlcHRoIjo0LCJjaGlsZHJlbiI6W3siaWQiOjIzLCJuYW1lIjoiY3RfY29kZV9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjIzLCJjdF9wYXJlbnQiOjIyLCJzZWxlY3RvciI6ImNvZGVfYmxvY2stMjMtOTA0Iiwib3JpZ2luYWwiOnsidW53cmFwIjoidHJ1ZSIsImNvZGUtcGhwIjoiPCEtLS0tLS0+IiwiY29kZS1jc3MiOiIubWVuMy1kaXZfaWNvbm9zLm1lbjMtbm9ybWFsIC5tZW4zLWRpdl9pY29ub3MtZXRpcXVldGEsXG4ubWVuMy1kaXZfaWNvbm9zLm1lbjMtbm9ybWFsIC5tZW4zLXNlcGFyYWRvcixcbi5tZW4zLWRpdl9pY29ub3MubWVuMy1ub3JtYWwgLm1lbjMtZGl2X2ljb25vcy1oaWRle1xuICBkaXNwbGF5OiBub25lO1xufVxuLm1lbjMtZGl2X2ljb25vcy5tZW4zLW5vcm1hbHtcbiAgZmxleC1kaXJlY3Rpb246IHJvdyAhaW1wb3J0YW50O1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIHRyYW5zaXRpb246IC42cyB0cmFuc2Zvcm0gY3ViaWMtYmV6aWVyKDEsIDEuMzksIDAuNDgsIC0xLjU2KTtcbn1cblxuLm1lbjMtZGl2X2ljb25vcy5tZW4zLW5vcm1hbC5tZW4zLWRpdl9pY29ub3MtdG9we1xuICB0b3A6IDByZW07XG59IiwiY29kZS1qcyI6ImRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJET01Db250ZW50TG9hZGVkXCIsIGZ1bmN0aW9uICgpIHtcbiAgICBpZiAod2luZG93LmFuZ3VsYXIpIHJldHVybjtcbiAgICBjb25zdCBtZW5Db250ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLm1lbjMtZGl2X2ljb25vcycpLFxuICAgICAgICAgIGxpbmtzSWNvbm9zID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLm1lbjMtbGlua19pY29ubycpLFxuICAgICAgICAgIGV0aXF1ZXRhID0gbWVuQ29udC5xdWVyeVNlbGVjdG9yKCcubWVuMy1kaXZfaWNvbm9zLWV0aXF1ZXRhJyksXG4gICAgICAgICAgVVJMID0gbG9jYXRpb25cbiAgICBcbiAgICBsZXQgbWVuQ29udFcgPSAgbWVuQ29udC5jbGFzc0xpc3QuY29udGFpbnMoJ21lbjMtbm9ybWFsJykgPyBtZW5Db250LmNsaWVudEhlaWdodCA6IG1lbkNvbnQuY2xpZW50V2lkdGgsXG4gICAgICAgIGV0aXF1ZXRhVHIgPSBtZW5Db250VyAgKyBldGlxdWV0YS5jbGllbnRXaWR0aCxcbiAgICAgICAgbWFyZ2VuID0gTWF0aC5yb3VuZCh3aW5kb3cuaW5uZXJIZWlnaHQgLyAzLjUpKi0xXG4gICAgICAgIGNvdW50ID0gMlxuICAgIG1lbkNvbnQuc3R5bGUuekluZGV4ID0gOTk5OTk5OVxuICAgIGlzUmVzcG9uc2l2ZSA9IG1lbkNvbnQuZGF0YXNldC5yZXNwb25zaXZlXG5cbiAgICBmdW5jdGlvbiBjYWxjdWxvcygpe1xuICAgICAgICBtZW5Db250VyA9ICBtZW5Db250LmNsYXNzTGlzdC5jb250YWlucygnbWVuMy1ub3JtYWwnKSA/IG1lbkNvbnQuY2xpZW50SGVpZ2h0IDogbWVuQ29udC5jbGllbnRXaWR0aFxuICAgICAgICBpZihtZW5Db250LmNsYXNzTGlzdC5jb250YWlucygnbWVuMy1ub3JtYWwnKSlyZXR1cm5cbiAgICAgICAgdHJhbnNsYXRlID0gbWVuQ29udFcgKiAtMVxuICAgICAgICBtZW5Db250LnN0eWxlLnJpZ2h0PSBgJHt0cmFuc2xhdGV9cHhgXG4gICAgfVxuICAgIGZ1bmN0aW9uIG1hbmlvYnJhKCl7XG4gICAgICBjb3VudD0gY291bnQ9PTEgPyAyIDogMVxuICAgICAgaWYoY291bnQgJSAyKXtcbiAgICAgICAgbWVuQ29udC5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWCgkey1tZW5Db250VyB9cHgpYFxuICAgICAgICBtZW5Db250LnN0eWxlLnRyYW5zaXRpb25EZWxheT0gJzBzJ1xuICAgICAgICBldGlxdWV0YS5zdHlsZSA9IGB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoJHtldGlxdWV0YVRyfXB4KTsgb3BhY2l0eTogMGBcbiAgICAgIH0gZWxzZXtcbiAgICAgICAgbWVuQ29udC5zdHlsZS50cmFuc2Zvcm0gPSBcIlwiXG4gICAgICAgIG1lbkNvbnQuc3R5bGUudHJhbnNpdGlvbkRlbGF5PSAnMC42cydcbiAgICAgICAgZXRpcXVldGEuc3R5bGUgPSBcIlwiXG4gICAgICB9XG4gICAgfVxuICBmdW5jdGlvbiByZXNwb25zaXZlKCl7XG4gICAgaWYoaXNSZXNwb25zaXZlICYmIHdpbmRvdy5pbm5lcldpZHRoID4gODQwKXtcbiAgICAgIG1lbkNvbnQuc3R5bGUucmlnaHQ9IFwiXCJcbiAgICAgIG1lbkNvbnQuc3R5bGUudHJhbnNmb3JtPSBcIlwiXG4gICAgICBtZW5Db250LmNsYXNzTGlzdC5hZGQoJ21lbjMtbm9ybWFsJylcbiAgICAgIGlmKHdpbmRvdy5pbm5lckhlaWdodCA8IDUwMClcbiAgICAgICBtYXJnZW4gPSAwXG4gICAgICBlbHNlXG4gICAgICAgIG1hcmdlbiA9IE1hdGgucm91bmQod2luZG93LmlubmVySGVpZ2h0IC8gMy41KSAqIC0xXG4gICAgfSBlbHNle1xuICAgICAgbWVuQ29udC5jbGFzc0xpc3QucmVtb3ZlKCdtZW4zLW5vcm1hbCcpXG4gICAgICBjYWxjdWxvcygpXG4gICAgICBjb3VudCA9IDFcbiAgICAgIG1hbmlvYnJhKClcbiAgICAgIG1hcmdlbiA9IE1hdGgucm91bmQod2luZG93LmlubmVySGVpZ2h0IC8gMy41KSAqIC0xXG4gICAgfVxuICB9XG4gIGZ1bmN0aW9uIHF1aXRhKCl7XG4gICAgZm9yKGwgb2YgbGlua3NJY29ub3MpXG4gICAgICBsLmZpcnN0Q2hpbGQuY2xhc3NMaXN0LnJlbW92ZSgnbWVuMy1pY29fYWN0aXZvJylcbiAgfVxuXG4gIG1lbkNvbnQucXVlcnlTZWxlY3RvcignLm1lbjMtZGl2X2ljb25vcy1oaWRlJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLG1hbmlvYnJhKVxuICBldGlxdWV0YS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIG1hbmlvYnJhKVxuICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgcmVzcG9uc2l2ZSlcbiAgcmVzcG9uc2l2ZSgpXG4gIGNhbGN1bG9zKClcbiAgY29uc3Qgb2JzZXJTZWMgPSBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoZW50cmllcyA9PiB7XG4gICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignW2hyZWYkPScrZW50cmllc1swXS50YXJnZXQuaWQrJ10nKS5maXJzdENoaWxkLmNsYXNzTGlzdC50b2dnbGUoJ21lbjMtaWNvX2FjdGl2bycsZW50cmllc1swXS5pc0ludGVyc2VjdGluZylcbiAgfSwge3Jvb3RNYXJnaW46IGAke21hcmdlbi0gNTB9cHhgfSkgXG4gICAgXG5cbiAgIFxuICBcbiAgbGlua3NJY29ub3MuZm9yRWFjaCgobGluaywgaW5kZXgpPT57XG4gICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsZnVuY3Rpb24oKXtcbiAgICAgIHF1aXRhKClcbiAgICAgIGxpbmsuZmlyc3RDaGlsZC5jbGFzc0xpc3QuYWRkKCdtZW4zLWljb19hY3Rpdm8nKVxuICAgIH0gKVxuICAgIGlmKGxpbmsuaHJlZi5pbmNsdWRlcyhVUkwuaHJlZisnIycpKXtcbiAgICAgIGhhc2hMaW5rID0gbGluay5ocmVmLnN1YnN0cmluZyggbGluay5ocmVmLmluZGV4T2YoJyMnKSk7XG4gICAgICBvYnNlclNlYy5vYnNlcnZlKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoaGFzaExpbmspKVxuICAgICAgcmV0dXJuXG4gICAgfVxuICAgIGlmKGxpbmsuaHJlZi5pbmNsdWRlcyhVUkwuaG9zdG5hbWUpKSBsaW5rLmZpcnN0Q2hpbGQuY2xhc3NMaXN0LmFkZCgnbWVuMy1pY29fYWN0aXZvJylcbiAgfSlcbn0pIC8qKioqIEZpbmFsICoqKiovICIsInVzZUN1c3RvbVRhZyI6InRydWUifSwibmljZW5hbWUiOiJDb2RlIEJsb2NrICgjNCkiLCJhY3RpdmVzZWxlY3RvciI6IiJ9LCJkZXB0aCI6NX0seyJpZCI6MjQsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoyNCwiY3RfcGFyZW50IjoyMiwic2VsZWN0b3IiOiJkaXZfYmxvY2stMjQtOTA0Iiwib3JpZ2luYWwiOnsiY3VzdG9tLWF0dHJpYnV0ZXMiOlt7Im5hbWUiOiJkYXRhLXJlc3BvbnNpdmUiLCJ2YWx1ZSI6InRydWUifV19LCJuaWNlbmFtZSI6Im1lbjMtZGl2X2ljb25vcyIsImNsYXNzZXMiOlsibWVuMy1kaXZfaWNvbm9zIiwibWVuMy1ub3JtYWwiXSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlfSwiZGVwdGgiOjUsImNoaWxkcmVuIjpbeyJpZCI6MjUsIm5hbWUiOiJjdF90ZXh0X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6MjUsImN0X3BhcmVudCI6MjQsInNlbGVjdG9yIjoidGV4dF9ibG9jay0yNS05MDQiLCJvcmlnaW5hbCI6eyJ0YWciOiJwIiwiY3VzdG9tLWNzcyI6IiJ9LCJuaWNlbmFtZSI6Im1lbjMtZGl2X2ljb25vcy1ldGlxdWV0YSIsImN0X2NvbnRlbnQiOiJNZW51IiwiY2xhc3NlcyI6WyJtZW4zLWRpdl9pY29ub3MtZXRpcXVldGEiXX0sImRlcHRoIjo2fSx7ImlkIjoyNiwibmFtZSI6ImN0X3RleHRfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoyNiwiY3RfcGFyZW50IjoyNCwic2VsZWN0b3IiOiJ0ZXh0X2Jsb2NrLTI2LTkwNCIsIm9yaWdpbmFsIjp7InRhZyI6InAifSwibmljZW5hbWUiOiJtZW4zLWRpdl9pY29ub3MtaGlkZSIsImN0X2NvbnRlbnQiOiJIaWRlIFRoaXMiLCJjbGFzc2VzIjpbIm1lbjMtZGl2X2ljb25vcy1oaWRlIl0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZX0sImRlcHRoIjo2fSx7ImlkIjoyNywibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjI3LCJjdF9wYXJlbnQiOjI0LCJzZWxlY3RvciI6ImRpdl9ibG9jay0yNy05MDQiLCJvcmlnaW5hbCI6eyJwYWRkaW5nLXRvcC11bml0IjoiIiwicGFkZGluZy1yaWdodC11bml0IjoiIiwicGFkZGluZy1ib3R0b20tdW5pdCI6IiIsInBhZGRpbmctbGVmdC11bml0IjoiIiwibWFyZ2luLXRvcC11bml0IjoiIiwibWFyZ2luLXJpZ2h0LXVuaXQiOiIiLCJtYXJnaW4tYm90dG9tLXVuaXQiOiIiLCJtYXJnaW4tbGVmdC11bml0IjoiIiwid2lkdGgtdW5pdCI6IiIsIm1pbi13aWR0aC11bml0IjoiIiwibWluLXdpZHRoIjoiMCIsIm1heC13aWR0aC11bml0IjoiIiwiaGVpZ2h0LXVuaXQiOiIiLCJtaW4taGVpZ2h0LXVuaXQiOiIiLCJtaW4taGVpZ2h0IjoiMCIsIm1heC1oZWlnaHQtdW5pdCI6IiJ9LCJuaWNlbmFtZSI6Im1lbjMtc2VwYXJhZG9yIiwiY2xhc3NlcyI6WyJtZW4zLXNlcGFyYWRvciJdfSwiZGVwdGgiOjZ9LHsiaWQiOjI4LCJuYW1lIjoiY3RfbGluayIsIm9wdGlvbnMiOnsiY3RfaWQiOjI4LCJjdF9wYXJlbnQiOjI0LCJzZWxlY3RvciI6ImxpbmstMjgtOTA0Iiwib3JpZ2luYWwiOnsidXJsIjoiI3NlY3Rpb24tNDItOTA0In0sIm5pY2VuYW1lIjoibWVuMy1saW5rX2ljb25vIiwiY2xhc3NlcyI6WyJtZW4zLWxpbmtfaWNvbm8iXSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlfSwiZGVwdGgiOjYsImNoaWxkcmVuIjpbeyJpZCI6MjksIm5hbWUiOiJjdF9mYW5jeV9pY29uIiwib3B0aW9ucyI6eyJjdF9pZCI6MjksImN0X3BhcmVudCI6MjgsInNlbGVjdG9yIjoiZmFuY3lfaWNvbi0yOS05MDQiLCJvcmlnaW5hbCI6eyJpY29uLWlkIjoiRm9udEF3ZXNvbWVpY29uLWhvbWUifSwibmljZW5hbWUiOiJtZW4zLWljb25vIiwiY2xhc3NlcyI6WyJtZW4zLWljb25vIiwibWVuMy1pY29fYWN0aXZvIl19LCJkZXB0aCI6N31dfSx7ImlkIjozMCwibmFtZSI6ImN0X2xpbmsiLCJvcHRpb25zIjp7ImN0X2lkIjozMCwiY3RfcGFyZW50IjoyNCwic2VsZWN0b3IiOiJsaW5rLTMwLTkwNCIsIm9yaWdpbmFsIjp7InVybCI6IiNzZWN0aW9uLTQ0LTkwNCJ9LCJuaWNlbmFtZSI6Im1lbjMtbGlua19pY29ubyIsImNsYXNzZXMiOlsibWVuMy1saW5rX2ljb25vIl0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZX0sImRlcHRoIjo2LCJjaGlsZHJlbiI6W3siaWQiOjMxLCJuYW1lIjoiY3RfZmFuY3lfaWNvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjMxLCJjdF9wYXJlbnQiOjMwLCJzZWxlY3RvciI6ImZhbmN5X2ljb24tMzEtOTA0Iiwib3JpZ2luYWwiOnsiaWNvbi1pZCI6IkZvbnRBd2Vzb21laWNvbi1ib29rIn0sIm5pY2VuYW1lIjoibWVuMy1pY29ubyIsImNsYXNzZXMiOlsibWVuMy1pY29ubyJdfSwiZGVwdGgiOjd9XX0seyJpZCI6MzIsIm5hbWUiOiJjdF9saW5rIiwib3B0aW9ucyI6eyJjdF9pZCI6MzIsImN0X3BhcmVudCI6MjQsInNlbGVjdG9yIjoibGluay0zMi05MDQiLCJvcmlnaW5hbCI6eyJ1cmwiOiIjc2VjdGlvbi00Ni05MDQifSwibmljZW5hbWUiOiJtZW4zLWxpbmtfaWNvbm8iLCJjbGFzc2VzIjpbIm1lbjMtbGlua19pY29ubyJdLCJhY3RpdmVzZWxlY3RvciI6ZmFsc2V9LCJkZXB0aCI6NiwiY2hpbGRyZW4iOlt7ImlkIjozMywibmFtZSI6ImN0X2ZhbmN5X2ljb24iLCJvcHRpb25zIjp7ImN0X2lkIjozMywiY3RfcGFyZW50IjozMiwic2VsZWN0b3IiOiJmYW5jeV9pY29uLTMzLTkwNCIsIm9yaWdpbmFsIjp7Imljb24taWQiOiJGb250QXdlc29tZWljb24tYWRkcmVzcy1ib29rIn0sIm5pY2VuYW1lIjoibWVuMy1pY29ubyIsImNsYXNzZXMiOlsibWVuMy1pY29ubyJdfSwiZGVwdGgiOjd9XX0seyJpZCI6MzQsIm5hbWUiOiJjdF9saW5rIiwib3B0aW9ucyI6eyJjdF9pZCI6MzQsImN0X3BhcmVudCI6MjQsInNlbGVjdG9yIjoibGluay0zNC05MDQiLCJvcmlnaW5hbCI6eyJ1cmwiOiIjc2VjdGlvbi00OC05MDQifSwibmljZW5hbWUiOiJtZW4zLWxpbmtfaWNvbm8iLCJjbGFzc2VzIjpbIm1lbjMtbGlua19pY29ubyJdLCJhY3RpdmVzZWxlY3RvciI6IiJ9LCJkZXB0aCI6NiwiY2hpbGRyZW4iOlt7ImlkIjozNSwibmFtZSI6ImN0X2ZhbmN5X2ljb24iLCJvcHRpb25zIjp7ImN0X2lkIjozNSwiY3RfcGFyZW50IjozNCwic2VsZWN0b3IiOiJmYW5jeV9pY29uLTM1LTkwNCIsIm9yaWdpbmFsIjp7Imljb24taWQiOiJGb250QXdlc29tZWljb24tZm9sZGVyLW9wZW4ifSwibmljZW5hbWUiOiJtZW4zLWljb25vIiwiY2xhc3NlcyI6WyJtZW4zLWljb25vIl0sImljb25vLWFjdGl2byI6W119LCJkZXB0aCI6N31dfSx7ImlkIjozNiwibmFtZSI6ImN0X2xpbmsiLCJvcHRpb25zIjp7ImN0X2lkIjozNiwiY3RfcGFyZW50IjoyNCwic2VsZWN0b3IiOiJsaW5rLTM2LTkwNCIsIm9yaWdpbmFsIjp7InVybCI6IiNzZWN0aW9uLTUwLTkwNCJ9LCJuaWNlbmFtZSI6Im1lbjMtbGlua19pY29ubyIsImNsYXNzZXMiOlsibWVuMy1saW5rX2ljb25vIl0sImFjdGl2ZXNlbGVjdG9yIjoiIn0sImRlcHRoIjo2LCJjaGlsZHJlbiI6W3siaWQiOjM3LCJuYW1lIjoiY3RfZmFuY3lfaWNvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjM3LCJjdF9wYXJlbnQiOjM2LCJzZWxlY3RvciI6ImZhbmN5X2ljb24tMzctOTA0Iiwib3JpZ2luYWwiOnsiaWNvbi1pZCI6IkZvbnRBd2Vzb21laWNvbi1saXN0LWFsdCJ9LCJuaWNlbmFtZSI6Im1lbjMtaWNvbm8iLCJjbGFzc2VzIjpbIm1lbjMtaWNvbm8iXSwiaWNvbm8tYWN0aXZvIjpbXX0sImRlcHRoIjo3fV19LHsiaWQiOjM4LCJuYW1lIjoiY3RfbGluayIsIm9wdGlvbnMiOnsiY3RfaWQiOjM4LCJjdF9wYXJlbnQiOjI0LCJzZWxlY3RvciI6ImxpbmstMzgtOTA0Iiwib3JpZ2luYWwiOnsidXJsIjoiI3NlY3Rpb24tNTItOTA0In0sIm5pY2VuYW1lIjoibWVuMy1saW5rX2ljb25vIiwiY2xhc3NlcyI6WyJtZW4zLWxpbmtfaWNvbm8iXSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlfSwiZGVwdGgiOjYsImNoaWxkcmVuIjpbeyJpZCI6MzksIm5hbWUiOiJjdF9mYW5jeV9pY29uIiwib3B0aW9ucyI6eyJjdF9pZCI6MzksImN0X3BhcmVudCI6MzgsInNlbGVjdG9yIjoiZmFuY3lfaWNvbi0zOS05MDQiLCJvcmlnaW5hbCI6eyJpY29uLWlkIjoiRm9udEF3ZXNvbWVpY29uLWJyaWVmY2FzZSJ9LCJuaWNlbmFtZSI6Im1lbjMtaWNvbm8iLCJjbGFzc2VzIjpbIm1lbjMtaWNvbm8iXX0sImRlcHRoIjo3fV19LHsiaWQiOjQwLCJuYW1lIjoiY3RfbGluayIsIm9wdGlvbnMiOnsiY3RfaWQiOjQwLCJjdF9wYXJlbnQiOjI0LCJzZWxlY3RvciI6ImxpbmstNDAtOTA0Iiwib3JpZ2luYWwiOnsidXJsIjoiI3NlY3Rpb24tNTQtOTA0In0sIm5pY2VuYW1lIjoibWVuMy1saW5rX2ljb25vIiwiY2xhc3NlcyI6WyJtZW4zLWxpbmtfaWNvbm8iXSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlfSwiZGVwdGgiOjYsImNoaWxkcmVuIjpbeyJpZCI6NDEsIm5hbWUiOiJjdF9mYW5jeV9pY29uIiwib3B0aW9ucyI6eyJjdF9pZCI6NDEsImN0X3BhcmVudCI6NDAsInNlbGVjdG9yIjoiZmFuY3lfaWNvbi00MS05MDQiLCJvcmlnaW5hbCI6eyJpY29uLWlkIjoiRm9udEF3ZXNvbWVpY29uLWVudmVsb3BlIn0sIm5pY2VuYW1lIjoibWVuMy1pY29ubyIsImNsYXNzZXMiOlsibWVuMy1pY29ubyJdfSwiZGVwdGgiOjd9XX1dfV19XSwiY2xhc3NlcyI6eyJtZW4zLWRpdl9pY29ub3MiOnsia2V5IjoibWVuMy1kaXZfaWNvbm9zIiwibWVkaWEiOnsicGhvbmUtbGFuZHNjYXBlIjp7Im9yaWdpbmFsIjp7ImFsaWduLWl0ZW1zIjoiY2VudGVyIiwianVzdGlmeS1jb250ZW50IjoiY2VudGVyIiwidGV4dC1hbGlnbiI6ImNlbnRlciIsImdhcCI6IjEwIiwicGFkZGluZy10b3AiOiIyIiwicGFkZGluZy1ib3R0b20iOiIyIiwicGFkZGluZy1sZWZ0IjoiNiIsInBhZGRpbmctcmlnaHQiOiI2In19fSwib3JpZ2luYWwiOnsibGVmdC11bml0IjoicHgiLCJ3aWR0aC11bml0IjoiJSIsInRvcC11bml0IjoicHgiLCJmbGV4LWRpcmVjdGlvbiI6ImNvbHVtbiIsImRpc3BsYXkiOiJmbGV4IiwianVzdGlmeS1jb250ZW50IjoiY2VudGVyIiwiZ2FwIjoiMjAiLCJwYWRkaW5nLWxlZnQiOiIyMCIsInBhZGRpbmctcmlnaHQiOiIyMCIsInBhZGRpbmctdG9wIjoiMTAiLCJwYWRkaW5nLWJvdHRvbSI6IjEwIiwiY3VzdG9tLWNzcyI6ImJhY2tkcm9wLWZpbHRlcjogYmx1cig1cHgpOyAtd2Via2l0LWJhY2tkcm9wLWZpbHRlcjogYmx1cig1cHgpOyIsImJhY2tncm91bmQtY29sb3IiOiJyZ2JhKDEwOSwyMDMsMTY3LDAuNjEpIiwiei1pbmRleCI6IjEwIiwiYm94LXNoYWRvdy1jb2xvciI6InJnYmEoMCwwLDAsMC4zKSIsImJveC1zaGFkb3ctaW5zZXQiOiJpbnNldCIsImJveC1zaGFkb3ctdmVydGljYWwtb2Zmc2V0IjoiMCIsImJveC1zaGFkb3ctaG9yaXpvbnRhbC1vZmZzZXQiOiIwIiwiYm94LXNoYWRvdy1zcHJlYWQiOiIyMCIsImJveC1zaGFkb3ctYmx1ciI6IjI0IiwidG9wIjoiMTIwIiwiYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1cyI6IjciLCJ0ZXh0LWFsaWduIjoiY2VudGVyIiwiYWxpZ24taXRlbXMiOiJjZW50ZXIiLCJwb3NpdGlvbiI6ImZpeGVkIiwicmlnaHQiOiIwIiwidHJhbnNpdGlvbi1kdXJhdGlvbiI6Ii4zIiwidHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb24iOiJjdWJpYy1iZXppZXIoMC41NCwgLTAuMDUsIDAsIDEuMikiLCJ0cmFuc2l0aW9uLXByb3BlcnR5IjoidHJhbnNmb3JtIiwiYm9yZGVyLXRvcC1sZWZ0LXJhZGl1cyI6IjcifSwiYWN0aXZlc2VsZWN0b3IiOnt9fSwibWVuMy1ub3JtYWwiOnsia2V5IjoibWVuMy1ub3JtYWwiLCJvcmlnaW5hbCI6eyJ3aWR0aC11bml0IjoiICIsImxlZnQtdW5pdCI6ImF1dG8iLCJyaWdodC11bml0IjoiYXV0byIsInBvc2l0aW9uIjoiZml4ZWQiLCJ3aWR0aCI6ImZpdC1jb250ZW50IiwidG9wIjoiMCIsImxlZnQiOiIwIiwicmlnaHQiOiIwIn19LCJtZW4zLWRpdl9pY29ub3MtZXRpcXVldGEiOnsia2V5IjoibWVuMy1kaXZfaWNvbm9zLWV0aXF1ZXRhIiwib3JpZ2luYWwiOnsicmlnaHQtdW5pdCI6InB4IiwidG9wLXVuaXQiOiJweCIsInBvc2l0aW9uIjoiZml4ZWQiLCJ3aWR0aCI6IjUwIiwiYmFja2dyb3VuZC1jb2xvciI6IiMxYzc0YWYiLCJhbGlnbi1pdGVtcyI6ImNlbnRlciIsImp1c3RpZnktY29udGVudCI6ImNlbnRlciIsImJvcmRlci10b3AtbGVmdC1yYWRpdXMiOiIxMCIsImJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXMiOiIxMCIsImN1c3RvbS1jc3MiOiJjdXJzb3I6IHBvaW50ZXI7IHdyaXRpbmctbW9kZTogdmVydGljYWwtcmw7IHRleHQtb3JpZW50YXRpb246IHVwcmlnaHQ7IiwidGV4dC1hbGlnbiI6ImxlZnQiLCJwYWRkaW5nLXRvcCI6IjUiLCJwYWRkaW5nLWJvdHRvbSI6IjUiLCJ6LWluZGV4IjoiNSIsImxldHRlci1zcGFjaW5nIjoiMSIsImxpbmUtaGVpZ2h0IjoiMiIsImNvbG9yIjoiI2ZmZmZmZiIsImZvbnQtd2VpZ2h0IjoiNzAwIiwidG9wIjoiMCIsImxlZnQiOiItNjIiLCJkaXNwbGF5IjoiZmxleCIsInRyYW5zaXRpb24tZHVyYXRpb24iOiIuMiJ9fSwibWVuMy1kaXZfaWNvbm9zLWhpZGUiOnsia2V5IjoibWVuMy1kaXZfaWNvbm9zLWhpZGUiLCJvcmlnaW5hbCI6eyJjb2xvciI6IiNmZmZmZmYiLCJjdXN0b20tY3NzIjoiY3Vyc29yOiBwb2ludGVyOyIsIm1hcmdpbi1ib3R0b20iOiIwIn0sImFjdGl2ZXNlbGVjdG9yIjp7fX0sIm1lbjMtc2VwYXJhZG9yIjp7ImtleSI6Im1lbjMtc2VwYXJhZG9yIiwib3JpZ2luYWwiOnsiaGVpZ2h0LXVuaXQiOiJweCIsIndpZHRoLXVuaXQiOiIlIiwid2lkdGgiOiIxMDAiLCJoZWlnaHQiOiIyIiwiYmFja2dyb3VuZC1jb2xvciI6InJnYmEoMCwwLDAsMC4yKSIsIm1pbi13aWR0aCI6IjAiLCJtaW4taGVpZ2h0IjoiMCIsImRpc3BsYXkiOiJmbGV4In19LCJtZW4zLWxpbmtfaWNvbm8iOnsia2V5IjoibWVuMy1saW5rX2ljb25vIiwib3JpZ2luYWwiOnsiei1pbmRleCI6IjYifSwiaG92ZXIiOnt9fSwibWVuMy1pY29ubyI6eyJrZXkiOiJtZW4zLWljb25vIiwibWVkaWEiOnsicGhvbmUtbGFuZHNjYXBlIjp7Im9yaWdpbmFsIjp7fX19LCJvcmlnaW5hbCI6eyJpY29uLWNvbG9yIjoiI2ZmZmZmZiIsImljb24tc2l6ZSI6IjE4IiwicGFkZGluZy1sZWZ0IjoiMTAiLCJwYWRkaW5nLXRvcCI6IjEwIiwicGFkZGluZy1yaWdodCI6IjEwIiwicGFkZGluZy1ib3R0b20iOiIxMCIsInRyYW5zaXRpb24tZHVyYXRpb24iOiIuNCIsImljb24tcGFkZGluZyI6IjE2IiwiaWNvbi1zdHlsZSI6IjIiLCJpY29uLWJhY2tncm91bmQtY29sb3IiOiJ0cmFuc3BhcmVudCIsImN1c3RvbS1jc3MiOiJjdXJzb3I6IHBvaW50ZXI7In0sImhvdmVyIjp7Imljb24tY29sb3IiOiIjZmZmZmZmIiwiYmFja2dyb3VuZC1jb2xvciI6IiNmZmE5MDEifX0sIm1lbjMtaWNvX2FjdGl2byI6eyJrZXkiOiJtZW4zLWljb19hY3Rpdm8iLCJvcmlnaW5hbCI6eyJpY29uLWNvbG9yIjoiIzAwMDAwMCIsImJhY2tncm91bmQtY29sb3IiOiIjZmZhOTAxIiwiaWNvbi1zaXplIjoiMTgiLCJpY29uLXBhZGRpbmciOiIxNiIsImJvcmRlci10b3AtY29sb3IiOiIjZmZmZmZmIiwiYm9yZGVyLXJpZ2h0LWNvbG9yIjoiI2ZmZmZmZiIsImJvcmRlci1ib3R0b20tY29sb3IiOiIjZmZmZmZmIiwiYm9yZGVyLWxlZnQtY29sb3IiOiIjZmZmZmZmIiwiYm9yZGVyLWFsbC1jb2xvciI6IiNmZmZmZmYiLCJib3JkZXItdG9wLXdpZHRoIjoiMSIsImJvcmRlci1yaWdodC13aWR0aCI6IjEiLCJib3JkZXItYm90dG9tLXdpZHRoIjoiMSIsImJvcmRlci1sZWZ0LXdpZHRoIjoiMSIsImJvcmRlci1hbGwtd2lkdGgiOiIxIiwiYm9yZGVyLXRvcC1zdHlsZSI6InNvbGlkIiwiYm9yZGVyLXJpZ2h0LXN0eWxlIjoic29saWQiLCJib3JkZXItYm90dG9tLXN0eWxlIjoic29saWQiLCJib3JkZXItbGVmdC1zdHlsZSI6InNvbGlkIiwiYm9yZGVyLWFsbC1zdHlsZSI6InNvbGlkIiwiYm9yZGVyLXJhZGl1cyI6IjUwIn19fSwiY29sb3JzIjp7fX0=
{"component":{"id":22,"name":"ct_section","options":{"ct_id":22,"ct_parent":100026,"selector":"section-22-904","original":{"position":"relative","container-padding-bottom":"0","container-padding-top":"0","container-padding-left":"0","container-padding-right":"0","section-width":"full-width","align-items":"center","justify-content":"center","align-content":"center"},"nicename":"Seccion Principal","activeselector":false},"depth":4,"children":[{"id":23,"name":"ct_code_block","options":{"ct_id":23,"ct_parent":22,"selector":"code_block-23-904","original":{"unwrap":"true","code-php":"","code-css":".men3-div_iconos.men3-normal .men3-div_iconos-etiqueta,\n.men3-div_iconos.men3-normal .men3-separador,\n.men3-div_iconos.men3-normal .men3-div_iconos-hide{\n display: none;\n}\n.men3-div_iconos.men3-normal{\n flex-direction: row !important;\n position: fixed;\n border-radius: 10px;\n transition: .6s transform cubic-bezier(1, 1.39, 0.48, -1.56);\n}\n\n.men3-div_iconos.men3-normal.men3-div_iconos-top{\n top: 0rem;\n}","code-js":"document.addEventListener(\"DOMContentLoaded\", function () {\n if (window.angular) return;\n const menCont = document.querySelector('.men3-div_iconos'),\n linksIconos = document.querySelectorAll('.men3-link_icono'),\n etiqueta = menCont.querySelector('.men3-div_iconos-etiqueta'),\n URL = location\n \n let menContW = menCont.classList.contains('men3-normal') ? menCont.clientHeight : menCont.clientWidth,\n etiquetaTr = menContW + etiqueta.clientWidth,\n margen = Math.round(window.innerHeight / 3.5)*-1\n count = 2\n menCont.style.zIndex = 9999999\n isResponsive = menCont.dataset.responsive\n\n function calculos(){\n menContW = menCont.classList.contains('men3-normal') ? menCont.clientHeight : menCont.clientWidth\n if(menCont.classList.contains('men3-normal'))return\n translate = menContW * -1\n menCont.style.right= `${translate}px`\n }\n function maniobra(){\n count= count==1 ? 2 : 1\n if(count % 2){\n menCont.style.transform = `translateX(${-menContW }px)`\n menCont.style.transitionDelay= '0s'\n etiqueta.style = `transform: translateX(${etiquetaTr}px); opacity: 0`\n } else{\n menCont.style.transform = \"\"\n menCont.style.transitionDelay= '0.6s'\n etiqueta.style = \"\"\n }\n }\n function responsive(){\n if(isResponsive && window.innerWidth > 840){\n menCont.style.right= \"\"\n menCont.style.transform= \"\"\n menCont.classList.add('men3-normal')\n if(window.innerHeight < 500)\n margen = 0\n else\n margen = Math.round(window.innerHeight / 3.5) * -1\n } else{\n menCont.classList.remove('men3-normal')\n calculos()\n count = 1\n maniobra()\n margen = Math.round(window.innerHeight / 3.5) * -1\n }\n }\n function quita(){\n for(l of linksIconos)\n l.firstChild.classList.remove('men3-ico_activo')\n }\n\n menCont.querySelector('.men3-div_iconos-hide').addEventListener('click',maniobra)\n etiqueta.addEventListener('click', maniobra)\n window.addEventListener('resize', responsive)\n responsive()\n calculos()\n const obserSec = new IntersectionObserver(entries => {\n document.querySelector('[href$='+entries[0].target.id+']').firstChild.classList.toggle('men3-ico_activo',entries[0].isIntersecting)\n }, {rootMargin: `${margen- 50}px`}) \n \n\n \n \n linksIconos.forEach((link, index)=>{\n link.addEventListener('click',function(){\n quita()\n link.firstChild.classList.add('men3-ico_activo')\n } )\n if(link.href.includes(URL.href+'#')){\n hashLink = link.href.substring( link.href.indexOf('#'));\n obserSec.observe(document.querySelector(hashLink))\n return\n }\n if(link.href.includes(URL.hostname)) link.firstChild.classList.add('men3-ico_activo')\n })\n}) /**** Final ****/ ","useCustomTag":"true"},"nicename":"Code Block (#4)","activeselector":""},"depth":5},{"id":24,"name":"ct_div_block","options":{"ct_id":24,"ct_parent":22,"selector":"div_block-24-904","original":{"custom-attributes":[{"name":"data-responsive","value":"true"}]},"nicename":"men3-div_iconos","classes":["men3-div_iconos","men3-normal"],"activeselector":false},"depth":5,"children":[{"id":25,"name":"ct_text_block","options":{"ct_id":25,"ct_parent":24,"selector":"text_block-25-904","original":{"tag":"p","custom-css":""},"nicename":"men3-div_iconos-etiqueta","ct_content":"Menu","classes":["men3-div_iconos-etiqueta"]},"depth":6},{"id":26,"name":"ct_text_block","options":{"ct_id":26,"ct_parent":24,"selector":"text_block-26-904","original":{"tag":"p"},"nicename":"men3-div_iconos-hide","ct_content":"Hide This","classes":["men3-div_iconos-hide"],"activeselector":false},"depth":6},{"id":27,"name":"ct_div_block","options":{"ct_id":27,"ct_parent":24,"selector":"div_block-27-904","original":{"padding-top-unit":"","padding-right-unit":"","padding-bottom-unit":"","padding-left-unit":"","margin-top-unit":"","margin-right-unit":"","margin-bottom-unit":"","margin-left-unit":"","width-unit":"","min-width-unit":"","min-width":"0","max-width-unit":"","height-unit":"","min-height-unit":"","min-height":"0","max-height-unit":""},"nicename":"men3-separador","classes":["men3-separador"]},"depth":6},{"id":28,"name":"ct_link","options":{"ct_id":28,"ct_parent":24,"selector":"link-28-904","original":{"url":"#section-42-904"},"nicename":"men3-link_icono","classes":["men3-link_icono"],"activeselector":false},"depth":6,"children":[{"id":29,"name":"ct_fancy_icon","options":{"ct_id":29,"ct_parent":28,"selector":"fancy_icon-29-904","original":{"icon-id":"FontAwesomeicon-home"},"nicename":"men3-icono","classes":["men3-icono","men3-ico_activo"]},"depth":7}]},{"id":30,"name":"ct_link","options":{"ct_id":30,"ct_parent":24,"selector":"link-30-904","original":{"url":"#section-44-904"},"nicename":"men3-link_icono","classes":["men3-link_icono"],"activeselector":false},"depth":6,"children":[{"id":31,"name":"ct_fancy_icon","options":{"ct_id":31,"ct_parent":30,"selector":"fancy_icon-31-904","original":{"icon-id":"FontAwesomeicon-book"},"nicename":"men3-icono","classes":["men3-icono"]},"depth":7}]},{"id":32,"name":"ct_link","options":{"ct_id":32,"ct_parent":24,"selector":"link-32-904","original":{"url":"#section-46-904"},"nicename":"men3-link_icono","classes":["men3-link_icono"],"activeselector":false},"depth":6,"children":[{"id":33,"name":"ct_fancy_icon","options":{"ct_id":33,"ct_parent":32,"selector":"fancy_icon-33-904","original":{"icon-id":"FontAwesomeicon-address-book"},"nicename":"men3-icono","classes":["men3-icono"]},"depth":7}]},{"id":34,"name":"ct_link","options":{"ct_id":34,"ct_parent":24,"selector":"link-34-904","original":{"url":"#section-48-904"},"nicename":"men3-link_icono","classes":["men3-link_icono"],"activeselector":""},"depth":6,"children":[{"id":35,"name":"ct_fancy_icon","options":{"ct_id":35,"ct_parent":34,"selector":"fancy_icon-35-904","original":{"icon-id":"FontAwesomeicon-folder-open"},"nicename":"men3-icono","classes":["men3-icono"],"icono-activo":[]},"depth":7}]},{"id":36,"name":"ct_link","options":{"ct_id":36,"ct_parent":24,"selector":"link-36-904","original":{"url":"#section-50-904"},"nicename":"men3-link_icono","classes":["men3-link_icono"],"activeselector":""},"depth":6,"children":[{"id":37,"name":"ct_fancy_icon","options":{"ct_id":37,"ct_parent":36,"selector":"fancy_icon-37-904","original":{"icon-id":"FontAwesomeicon-list-alt"},"nicename":"men3-icono","classes":["men3-icono"],"icono-activo":[]},"depth":7}]},{"id":38,"name":"ct_link","options":{"ct_id":38,"ct_parent":24,"selector":"link-38-904","original":{"url":"#section-52-904"},"nicename":"men3-link_icono","classes":["men3-link_icono"],"activeselector":false},"depth":6,"children":[{"id":39,"name":"ct_fancy_icon","options":{"ct_id":39,"ct_parent":38,"selector":"fancy_icon-39-904","original":{"icon-id":"FontAwesomeicon-briefcase"},"nicename":"men3-icono","classes":["men3-icono"]},"depth":7}]},{"id":40,"name":"ct_link","options":{"ct_id":40,"ct_parent":24,"selector":"link-40-904","original":{"url":"#section-54-904"},"nicename":"men3-link_icono","classes":["men3-link_icono"],"activeselector":false},"depth":6,"children":[{"id":41,"name":"ct_fancy_icon","options":{"ct_id":41,"ct_parent":40,"selector":"fancy_icon-41-904","original":{"icon-id":"FontAwesomeicon-envelope"},"nicename":"men3-icono","classes":["men3-icono"]},"depth":7}]}]}]},"classes":{"men3-div_iconos":{"key":"men3-div_iconos","media":{"phone-landscape":{"original":{"align-items":"center","justify-content":"center","text-align":"center","gap":"10","padding-top":"2","padding-bottom":"2","padding-left":"6","padding-right":"6"}}},"original":{"left-unit":"px","width-unit":"%","top-unit":"px","flex-direction":"column","display":"flex","justify-content":"center","gap":"20","padding-left":"20","padding-right":"20","padding-top":"10","padding-bottom":"10","custom-css":"backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);","background-color":"rgba(109,203,167,0.61)","z-index":"10","box-shadow-color":"rgba(0,0,0,0.3)","box-shadow-inset":"inset","box-shadow-vertical-offset":"0","box-shadow-horizontal-offset":"0","box-shadow-spread":"20","box-shadow-blur":"24","top":"120","border-bottom-left-radius":"7","text-align":"center","align-items":"center","position":"fixed","right":"0","transition-duration":".3","transition-timing-function":"cubic-bezier(0.54, -0.05, 0, 1.2)","transition-property":"transform","border-top-left-radius":"7"},"activeselector":{}},"men3-normal":{"key":"men3-normal","original":{"width-unit":" ","left-unit":"auto","right-unit":"auto","position":"fixed","width":"fit-content","top":"0","left":"0","right":"0"}},"men3-div_iconos-etiqueta":{"key":"men3-div_iconos-etiqueta","original":{"right-unit":"px","top-unit":"px","position":"fixed","width":"50","background-color":"#1c74af","align-items":"center","justify-content":"center","border-top-left-radius":"10","border-bottom-left-radius":"10","custom-css":"cursor: pointer; writing-mode: vertical-rl; text-orientation: upright;","text-align":"left","padding-top":"5","padding-bottom":"5","z-index":"5","letter-spacing":"1","line-height":"2","color":"#ffffff","font-weight":"700","top":"0","left":"-62","display":"flex","transition-duration":".2"}},"men3-div_iconos-hide":{"key":"men3-div_iconos-hide","original":{"color":"#ffffff","custom-css":"cursor: pointer;","margin-bottom":"0"},"activeselector":{}},"men3-separador":{"key":"men3-separador","original":{"height-unit":"px","width-unit":"%","width":"100","height":"2","background-color":"rgba(0,0,0,0.2)","min-width":"0","min-height":"0","display":"flex"}},"men3-link_icono":{"key":"men3-link_icono","original":{"z-index":"6"},"hover":{}},"men3-icono":{"key":"men3-icono","media":{"phone-landscape":{"original":{}}},"original":{"icon-color":"#ffffff","icon-size":"18","padding-left":"10","padding-top":"10","padding-right":"10","padding-bottom":"10","transition-duration":".4","icon-padding":"16","icon-style":"2","icon-background-color":"transparent","custom-css":"cursor: pointer;"},"hover":{"icon-color":"#ffffff","background-color":"#ffa901"}},"men3-ico_activo":{"key":"men3-ico_activo","original":{"icon-color":"#000000","background-color":"#ffa901","icon-size":"18","icon-padding":"16","border-top-color":"#ffffff","border-right-color":"#ffffff","border-bottom-color":"#ffffff","border-left-color":"#ffffff","border-all-color":"#ffffff","border-top-width":"1","border-right-width":"1","border-bottom-width":"1","border-left-width":"1","border-all-width":"1","border-top-style":"solid","border-right-style":"solid","border-bottom-style":"solid","border-left-style":"solid","border-all-style":"solid","border-radius":"50"}}}}

03 Menu

Descripción

Leer Instrucciones

En este menú existe la posibilidad de tratarlo de dos maneras:

  1. Que funcione de manera lateral y alineación vertical, con el botón de esconder el menú dejando el botón accesible para hacerlo visible.
  2. Que en pantallas grandes se presente en la parte superior con alineación horizontal y en pantallas pequeñas como se describe en el punto anterior.

Así mismo se puede utilizar para cualquier tipo de enlace, tanto internos en la misma página, señalando a secciones de la misma página o a otras páginas del mismo sitio. La programación en JavaScript se encarga de detectar el tipo de enlace y dar la clase conveniente para señalar el botón activo diferenciándolo de los demás.

Ver Instrucciones

Por defecto viene configurado para que trabaje en responsive, si se quiere desactivar a esta función, para que siempre tenga vista con alienación horizontal, seleccionar la sección con el nombre men3-div_iconos en el árbol de estructura, y en la sección de propiedades seleccionar el atributo "data-responsive" y poner "false" como valor del mismo.

Imagen 1
Mostrando Atributos
Imagen 2
Attributo para configuración
Contactar
img-7
Copiar
img-8
Copiar
Comentar
Copiar PHP / HTML
php logo
Copiar CSS
css logo
Copiar JS
logo js
document.addEventListener("DOMContentLoaded", function () {
    if (window.angular) return;
    const menCont = document.querySelector('.men3-div_iconos'),
        linksIconos = document.querySelectorAll('.men3-link_icono'),
        etiqueta = menCont.querySelector('.men3-div_iconos-etiqueta'),
        URL = location
    let menContW = menCont.classList.contains('men3-normal') ? menCont.clientHeight : menCont.clientWidth,
        etiquetaTr = menContW + etiqueta.clientWidth,
        margen = Math.round(window.innerHeight / 3.5) * -1
    count = 2
    menCont.style.zIndex = 9999999
    isResponsive = menCont.dataset.responsive
    functioncalculos() {
        menContW = menCont.classList.contains('men3-normal') ? menCont.clientHeight : menCont.clientWidth
        if (menCont.classList.contains('men3-normal')) return
        translate = menContW * -1
        menCont.style.right = `${translate}px`
    }
    functionmaniobra() {
        count = count == 1 ? 2 : 1
        if (count % 2) {
            menCont.style.transform = `translateX(${-menContW}px)`
            menCont.style.transitionDelay = '0s'
            etiqueta.style = `transform: translateX(${etiquetaTr}px); opacity: 0`
        } else {
            menCont.style.transform = ""
            menCont.style.transitionDelay = '0.6s'
            etiqueta.style = ""
        }
    }
    functionresponsive() {
        if (isResponsive && window.innerWidth > 840) {
            menCont.style.right = ""
            menCont.style.transform = ""
            menCont.classList.add('men3-normal')
        } else {
            menCont.classList.remove('men3-normal')
            calculos()
            count = 1
            maniobra()
        }
        margen = Math.round(window.innerHeight / 3.5) * -1
    }
    functionquita() {
        for (l of linksIconos)
            l.firstChild.classList.remove('men3-ico_activo')
    }
    menCont.querySelector('.men3-div_iconos-hide').addEventListener('click', maniobra)
    etiqueta.addEventListener('click', maniobra)
    window.addEventListener('resize', responsive)
    responsive()
    calculos()
    const obserSec = newIntersectionObserver(entries => {
        document.querySelector('[href$=' + entries[0].target.id + ']').firstChild.classList.toggle('men3-ico_activo', entries[0].isIntersecting)
    }, { rootMargin: `${margen - 50}px` })
    linksIconos.forEach((link, index) => {
        link.addEventListener('click', function () {
            quita()
            link.firstChild.classList.add('men3-ico_activo')
        })
        if (link.href.includes(URL.href + '#')) {
            hashLink = link.href.substring(link.href.indexOf('#'));
            obserSec.observe(document.querySelector(hashLink))
            return
        }
        if (link.href.includes(URL.hostname)) link.firstChild.classList.add('men3-ico_activo')
    })
}) /**** Final ****/
document.addEventListener("DOMContentLoaded", function () {
	if (window.angular) return;
	const menCont = document.querySelector('.men3-div_iconos'),
		linksIconos = document.querySelectorAll('.men3-link_icono'),
		etiqueta = menCont.querySelector('.men3-div_iconos-etiqueta'),
		URL = location

	let menContW = menCont.classList.contains('men3-normal') ? menCont.clientHeight : menCont.clientWidth,
		etiquetaTr = menContW + etiqueta.clientWidth,
		margen = Math.round(window.innerHeight / 3.5) * -1
	count = 2
	menCont.style.zIndex = 9999999
	isResponsive = menCont.dataset.responsive

	function calculos() {
		menContW = menCont.classList.contains('men3-normal') ? menCont.clientHeight : menCont.clientWidth
		if (menCont.classList.contains('men3-normal')) return
		translate = menContW * -1
		menCont.style.right = `${translate}px`
	}
	function maniobra() {
		count = count == 1 ? 2 : 1
		if (count % 2) {
			menCont.style.transform = `translateX(${-menContW}px)`
			menCont.style.transitionDelay = '0s'
			etiqueta.style = `transform: translateX(${etiquetaTr}px); opacity: 0`
		} else {
			menCont.style.transform = ""
			menCont.style.transitionDelay = '0.6s'
			etiqueta.style = ""
		}
	}
	function responsive() {
		if (isResponsive && window.innerWidth > 840) {
			menCont.style.right = ""
			menCont.style.transform = ""
			menCont.classList.add('men3-normal')
		} else {
			menCont.classList.remove('men3-normal')
			calculos()
			count = 1
			maniobra()
		}
		margen = Math.round(window.innerHeight / 3.5) * -1
	}
	function quita() {
		for (l of linksIconos)
			l.firstChild.classList.remove('men3-ico_activo')
	}

	menCont.querySelector('.men3-div_iconos-hide').addEventListener('click', maniobra)
	etiqueta.addEventListener('click', maniobra)
	window.addEventListener('resize', responsive)
	responsive()
	calculos()
	const obserSec = new IntersectionObserver(entries => {
		document.querySelector('[href$=' + entries[0].target.id + ']').firstChild.classList.toggle('men3-ico_activo', entries[0].isIntersecting)
	}, { rootMargin: `${margen - 50}px` })

	linksIconos.forEach((link, index) => {
		link.addEventListener('click', function () {
			quita()
			link.firstChild.classList.add('men3-ico_activo')
		})
		if (link.href.includes(URL.href + '#')) {
			hashLink = link.href.substring(link.href.indexOf('#'));
			obserSec.observe(document.querySelector(hashLink))
			return
		}
		if (link.href.includes(URL.hostname)) link.firstChild.classList.add('men3-ico_activo')
	})
}) /**** Final ****/
Ver todos los Templates

Recordad que esto son templates o base de template, la personalización y adaptación depende del gusto de cada una y de las exigencias de cada diseño, por lo que es imposible en una plantilla todas las opciones de cada diseño en particular.

Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

Nos vemos en la próxima. 👌