Custom Menu with Image
This is for a sidebar menu. Add the following to a HTML/CSS block. Change the "#"
for the URL of that page and change the image to suit.
HTML
<ul class="custom-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li class="sub"><a href="#"><img src="your-image-here.png" width="51" height="30" /></a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
</ul>
CSS
/**
* Custom Menu with Image
************************************************/
.custom-menu { background-color: #1d1d1d;}
.custom-menu,
.custom-menu ul {
list-style: none;
margin: 0;
padding: 0;
z-index: 10;
}
.custom-menu li {
margin: 0;
padding: 0;
position: relative;
transition: background 0.5s;
}
.custom-menu li a {
font-size: 30px; /* same size as image height */
color: #ededf0;
border-top: 1px solid #333;
display: block;
text-decoration: none;
padding: 15px 25px;
position: relative;
}
.custom-menu li a:hover {color: #87878c;}
.custom-menu li:first-child a {border-top: 0;}
.custom-menu .sub::after {
content: '';
position: absolute;
display: inline;
top: 50%;
margin-top: -4px;
right: 8px;
border-width: 4px;
border-style: solid;
border-color: transparent transparent transparent #ededf0;
transition: border-color 0.5s;
}
.custom-menu .sub:hover::after {border-color: transparent transparent transparent #87878c;}
/**
* Sub level menu items
************************************************/
.custom-menu li.sub ul {
min-width: 180px;
position: absolute;
display: none;
left: 100%;
top: 0;
background-color: #1a1a1a;
border: 1px solid #1f1f21;
box-shadow: 0 0 12px 4px rgba(0,0,0,0.12);
}
.custom-menu ul li a {
font-size: 16px;
border-top: 1px solid #1f1f21;
}
.custom-menu ul li:first-child a {border-top: 0;}
.custom-menu ul li:hover a {background-color: #1f1f21;}
.custom-menu li:hover > ul {display: block;}
/**
* Mobile
************************************************/
@media only screen and ( max-width: 736px ) {
.custom-menu,
.custom-menu ul,
.custom-menu li ul {width: 100%;}
.custom-menu li ul {left: -1px; top: 55px;}
.custom-menu .sub::after {border-color: #ededf0 transparent transparent transparent;}
.custom-menu .sub:hover::after {border-color: #87878c transparent transparent transparent;}
}
/* Custom Menu with Image End */
This site and all of its contents are copyright © 2022 Images in the Backcountry / Mike Matenkosky – All rights reserved.
By using this site you agree to our Privacy Policy.