how to get circular menu (incl. hover + link functionality) fully responsive? - html

Question

I am trying to get a circular menu (incl. hover + link functionality) to behave fully responsible.
The hovering and linking part basically is working fine.
Without the hovering part, the circular menu behaves responsive.
But with the hovering part included, the menu gets squeezed when display/screen width is adjusted.
I have tried the #media approach, setting different width and height in .ch-grid li for different screen widths, but that is not to be considered as a true solution, is merely a temporary workaround.
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
#test1 {
display: -webkit-flex;
display: flex;
text-align: center;
justify-content: space-between;
margin-bottom: 30px;
margin-left: 35px;
margin-right: 35px;
}
#test2 {
width: 15%;
text-align: center;
position: relative;
border-radius: 50%;
overflow: hidden;
background-color: #ff0082;
}
ul li img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 90px;
display: inline-block;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease-in-out;
}
.ch-info {
position: absolute;
background: rgba(63, 147, 147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.ch-info p {
color: #fff;
padding: 13px 0px;
font-style: normal;
font-size: 9px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
display: block;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
font-size: 140%;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
<ul id="test1" class="ch-grid">
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_hansie_hansumus.jpg" />
<div class="ch-info">
<p>Hansie<BR>Hansumus</p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_missie_marble.jpg" />
<div class="ch-info">
<p>Missie<BR>Marble</p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_piotr_linski.jpg" />
<div class="ch-info">
<p>Piotr<BR>Linski</p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_red.jpg" />
<div class="ch-info">
<p>Mister<BR>Red</p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_green.jpg" />
<div class="ch-info">
<p>Miss<BR>Green</p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_blue.jpg" />
<div class="ch-info">
<p>Mister<BR>Blue</p>
</div>
</div>
</li>
</ul>
A fiddle, showing the present CSS- and HTML-code can be found here: https://jsfiddle.net/piotrlinski/b3tL9v4h/8/
Any suggestions how to solve?

Answer 1

The class attribute can be used with multiple HTML elements/tags and
all will take the effect. Where as the id is meant for a single
element/tag and is considered unique. Moreoever the id has a higher
specificity value than the class.
Responsive image:
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
An unordered list:
<ul class="thumbnails">
<li>Thumbnail 1</li>
<li>Thumbnail 2</li>
<li>...</li>
</ul>
List unstyled in one line with display: flex:
.thumbnails {
display: flex;
list-style: none;
...
}
Structure of a thumbnail
<a href="https://nkbv.nl" class="thumbnail">
<img src = "https://gespreksmakers.nl/images/1_hansie_hansumus.jpg"/>
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
where .thumbnail has position: relative and .overlay has position: absolute so that .overlay is in the same area as .thumbnail.
Make font size responsive with vw.
A modified and clear solution
.thumbnails {
display: flex;
list-style: none;
padding: 0 2vw;
}
.thumbnails>li {
flex: 1 0;
margin: 0 5px;
text-align: center;
line-height: 0;
}
.thumbnail,
.thumbnail>img,
.thumbnail>.overlay {
border-radius: 50%;
}
.thumbnail {
position: relative;
display: inline-block;
cursor: pointer;
}
/* Responsive images */
.thumbnail>img {
display: block;
max-width: 100%;
height: auto;
}
.thumbnail>.overlay {
background: rgba(63, 147, 147, 0.8);
opacity: 0.7;
position: absolute;
top: 0;
height: 100%;
width: 100%;
transform: scale(0);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
transition: all 0.4s ease-in-out;
}
.thumbnail>.overlay>.text {
color: white;
width: 66.66%;
line-height: 100%;
margin: 0 auto;
padding: 5px 0;
border-bottom: 1px solid;
border-top: 1px solid;
font-size: 1.85vw;
transition: opacity 1s ease-in-out 0.4s;
opacity: 0;
}
.thumbnail:hover>.overlay {
transform: scale(1);
}
.thumbnail:hover>.overlay>.text {
opacity: 1;
}
<ul class="thumbnails">
<li>
<a href="https://nkbv.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_hansie_hansumus.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://kakivi.de" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_missie_marble.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://telegraaf.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_piotr_linski.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://www.tukhut.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_red.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://www.alumnei.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_green.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://www.astronieuws.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_blue.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
</ul>

Answer 2

You may check my code below though I have made kind of lots of changes.
Some tips:
IDs must be unique in the HTML document, so you should not use an ID more than once (e.g. #test2).
Also, it is better to use the classes you created to style your document, rather than the IDs (e.g. #test1, #test2 could be replaced by .ch-grid and .ch-grid li, respectively).
<style>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.ch-grid {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
text-align: center;
}
.ch-grid:after,
.ch-item:before {
content: "";
display: table;
}
.ch-grid:after {
clear: both;
flex: auto;
}
.ch-grid li {
flex: 1;
display: inline-block;
min-width: calc(100% / 6);
max-width: calc(100% / 6);
position: relative;
background-color: #ff0082;
overflow: hidden;
border-radius: 50%;
text-align: center;
}
.ch-grid li img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 10;
}
.ch-item {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
cursor: default;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6),
0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.ch-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(63, 147, 147, 0.8);
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
z-index: 20;
}
.ch-info p {
color: #fff;
padding: 13px 0px;
font-style: normal;
font-size: 9px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
display: block;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
font-size: 140%;
letter-spacing: 1px;
padding-top: 4px;
font-family: "Open Sans", Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
#media (max-width: 767px) {
.ch-grid li {
min-width: calc(100% / 3);
max-width: calc(100% / 3);
}
}
</style>

Answer 3

If you set width over percentage, the list items will not seem as a circle depending the screen width. Because of this situation, you should set fixed width to the list items and set wrap to parent as you can see below:
#test1 {
display: -webkit-flex;
display: flex;
text-align: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 30px;
margin-left: 35px;
margin-right: 35px;
}
#test2 {
flex-basis: 85px;
text-align: center;
position: relative;
border-radius: 50%;
overflow: hidden;
background-color: #ff0082;
}