Scribd
Upload
74 views7 pages

Musc Perfume Website Navigation Menu

The document is the header section for a website. It contains the logo, navigation menu, search bar, user account and cart icons. The navigation menu expands on mobile screens and collapses on desktop screens. It highlights the active page in the menu.

Uploaded by

Simon Valenzuela Diaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
74 views7 pages

Musc Perfume Website Navigation Menu

The document is the header section for a website. It contains the logo, navigation menu, search bar, user account and cart icons. The navigation menu expands on mobile screens and collapses on desktop screens. It highlights the active page in the menu.

Uploaded by

Simon Valenzuela Diaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<div class="header"><div class="seccion_izq"><div class="menu_mob"><div

class="menu_ham"> ☰</div><div class="menu_desp"><div class="item_menu1"


onclick="[Link]='[Link]
menu=marcas'">Shopping</div><div class="item_menu1">Cosmetica</div><div
class="item_menu1"
onclick="[Link]='[Link]
div><div class="item_menu1"
onclick="[Link]='[Link]
div></div></div><div class="item_menu"
onclick="[Link]='[Link]
menu=marcas'">Shopping</div><div class="item_menu">Cosmética</div><div
class="item_menu"><a
href="[Link]
class="item_menu"><a
href="[Link]
class="centro"><a href="[Link]
src="[Link]
div><div class="seccion_der"><div class="icon_menu"><img class="imagen_busq" src=
"[Link] /><div
class="ima_busq"><!--<img src="C:\\Users\\TSUKASA\\Downloads\\[Link]" />--
><input class="encogido" placeholder="Buscar Producto" type="text" name=""
value=""><div class="menu_busq ocultar"></div><div class="cerrar_busq
ocultar">X</div></div></div><div class="icon_menu"><a
href="[Link] src= "[Link]
content/uploads/2021/12/[Link]" /></a></div><div class="icon_menu"><a
href="[Link] src= "[Link]
content/uploads/2021/12/[Link]" /><div
class="cantid">0</div></a></div></div></div>

<style>
@media (min-width:981px){
.header img{
transition:transform .5s;
}

.header img:hover{
transform:scale(1.15);
}

.seccion_der{
transform:translate(5%,0px);
}
}

.cantid{
width:25px;
height:25px;
position:absolute;
display: flex;
justify-content: center;
align-items: center;
transform: translate(15px, -20px)!important;
border-radius: 50%;
background-color: black;
color: white!important;
}

/*@media (min-width:980px){*/
.menu_desp{
width:150px;
max-height:200px;
height:auto!important;
border:1px solid black;
position: absolute;
background-color: white;

/*.item_menu1>a,*/ .item_menu>a{
color:#666666!important;
background-color:#f1ece8;
font-weight:500;
font-family:'Roboto',Helvetica,Arial,Lucida,sans-serif!important;
}
/*
.item_menu1>a{
transition:background-color 1s, color 1s;
}*/
.item_menu1{
color:#666666!important;
background-color:white;
font-weight:500;
font-family:'Roboto',Helvetica,Arial,Lucida,sans-serif!important;
transition:background-color 1s, color 1s, height 1s;
cursor:pointer;
padding:5px 15px 5px 15px;
text-transform: uppercase;
}

.item_menu1:hover/*, .item_menu1>a:hover*/{
background-color:black;
color:white!important;
}

.reducir{
height:0px!important;
opacity:0!important;
}

.header{
padding-top:10px;
padding-bottom:10px;
padding-left:4.5%;/*30px*/
padding-right:4.5%;/*30px*/
display:flex;
justify-content:center;
background-color:#f1ece8;
/*border:1px solid black;*/
align-items:center;
}

.seccion_izq,.seccion_der{
width:42.5%;
}

.seccion_der{
display:flex;
justify-content:right;
align-items:center;
/* transform:translate(5%,0px);*/
}

.item_menu{
width:auto;
margin-right:48px;
float:left;
color:#666666!important;
font-weight:500;
font-family:'Roboto',Helvetica,Arial,Lucida,sans-serif!important;
text-transform: uppercase;
cursor:pointer;
font-size:15px;
margin-bottom:10px;
margin-top:10px;
}
.icon_menu{
width:50px;
margin-right:20px;
display:flex!important;
justify-content:right!important;
}

.centro{
width:15%;
max-width:215px;
min-width:140px;
}

.menu_ham{
color:black!important;
font-size:25px;
cursor:pointer;
width:30px;
}

@media (min-width:981px){
.menu_mob{
display:none;
}
.menu_desp{
transition:height 1s;
}
.destacado{
border-bottom:2px solid black;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
@media (max-width:980px){
.item_menu{
display:none;
}
.destacado{
background-color: black;
color:white!important;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.icon_menu{
margin-right:0px;
}
}

/*desaparece opiones menu desplegable*/


.seccion_izq > .item_menu:nth-child(3), .menu_desp > .item_menu1:nth-child(2){
display:none;
}
/**/
/* }*/
/*css menu búsqueda*/
.menu_busq{
background-color:white;
width:240px;
height:auto;
text-align:left;
position:absolute!important;
/*transform:translate(-150px,0px);*/
transform:translate(-200px,-35px);
transition:visibility .5s, opacity .5s;
border-radius:5px;
padding:5px 10px;
border-radius: 0px 0px 15px 15px
}

@media (max-width:505px){
.menu_busq{
transform:translate(-150px,0px)!important;
}

.cerrar_busq{
top: 40px!important;
right: -15px!important;
}
.ima_busq input{
transform:translate(-150px,0px)!important;
}

}
.ima_busq input{
width:240px;
padding:10px 10px;
/*transform:translate(-150px,0px);*/
transform:translate(-200px,-35px);
border-radius:20px;border:2px solid black;
transition:visibility 1s, width 1s;
}

.encogido{
width:0px!important;
visibility:hidden;
}

.ocultar{
visibility:hidden;
opacity:0;
}

.fil_busq{
height:50px;
display:flex;
align-items:center;
}

.fil_busq>div:nth-child(1){
width:20%;
}
.fil_busq>div:nth-child(2){
width:80%;
padding:0px 10px;
display:flex;
align-items:center;
}

.cerrar_busq{
/*
font-size:16px;
font-weight:800;
position:absolute;
top: 40px;
right: 20px;
padding: 5px;
border-radius:50%;
*/
font-size: 16px;
font-weight: 800;
position: absolute;
top: 10px;
right: 30px;
padding: 5px;
border-radius: 50%;

width: 25px;
height: 25px;
transition:background-color 1s, color 1s;
display: flex;
justify-content: center;
align-items: center;
color:black;
}

.cerrar_busq:hover{
background-color:black;
color: white!important;
}

.ima_busq{
width:70px;
margin-left:auto;
cursor:pointer;
position:absolute;
transform:translate(0px,30px);
}
.imagen_busq{
cursor:pointer;
}
</style>
<!--<script
src="[Link]
<script>
jQuery(document).ready(function($){

function dis(){
var ini = [Link]('menu_desp')[0];
[Link]('reducir');
for(var i=0;i<[Link];i++){
[Link][i].[Link]('reducir');
}
}
dis();

function aum(){
var ini = [Link]('menu_desp')[0];
[Link]('reducir');
for(var i=0;i<[Link];i++){
[Link][i].[Link]('reducir');
}
}

[Link]('mensaje===');

[Link]('menu_ham')[0].onclick = function(){
aum();
}

$('.item_menu1').click(function(evt){
dis();
});

var url2 = [Link];


//casos
if([Link]('/contacto/').length == 2){
buscarMenu('CONTACTO');
}else if([Link]('/maison/').length == 2){
buscarMenu('MAISON');
}else if([Link]('/inicio/').length == 2 || [Link]('[Link]/')[1]
[0]=='?'){
var variables = [Link]('?');
if([Link] == 2){

variables1 = variables[1].split('&');
for(var i=0;i<[Link];i++){
variables = variables1[0].split('=');
if(variables[2*i].trim() == 'menu' && variables[2*i+1].trim()=='marcas'){
buscarMenu('SHOPPING');
[Link]('slider_princ')[0].outerHTML = "";
[Link]('slider_princ')[0].outerHTML = "";
break;
}
}
}
}

/*
var d2 = [Link]('?');
if(d2[1] != null){
d2 = d2[1].split('=');
for(var i=0;i<parseInt([Link]/2);i++){
if(d2[2*i] == 'pag_act'){
buscarMenu(d2[2*i+1]);
break;
}
}

} */

function buscarMenu(palabra){
var dest = [Link]('destacado');
for(var i=0;i<[Link];i++){
dest[0].[Link]('destacado');
}
var raiz_mob = [Link]('item_menu1');
var raiz_desk = [Link]('item_menu');
for(var i=0;i<raiz_mob.length;i++){
if(raiz_mob[i].[Link]() == palabra){
raiz_mob[i].[Link]('destacado');
raiz_desk[i].[Link]('destacado');
break;
}
}

}
[Link]('header')[0].innerHTML="";
[Link]('header')
[0].appendChild([Link]('header')[0]);
[Link]('cantid')[0].innerHTML = cant_tot;

[Link] = function(evt){if(!
[Link]('menu_ham')){dis();}}

});
</script>

You might also like