I have built this conceptual design of a localization menu on this CodePen
I am wondering if I should have structured my <div>
s better or if this should be wrapped in a <ul>
instead since <div class="locale">
could be reduced in the CSS with .international li
.
HTML
<div class="international">
<div class="locale">
<a href="#"> <!-- link pending -->
North America
<div class="americas"></div>
</a>
</div>
<div class="locale">
<a href="#"> <!-- link pending -->
Europe
<div class="europe"></div>
</a>
</div>
<div class="locale">
<a href="#"> <!-- link pending -->
Korea
<div class="korea"></div>
</a>
</div>
<div class="intlButton">
<a href="#"> <!-- link pending -->
<i class="fa fa-globe"></i>
</a>
</div>
<!-- Planned functionality for production is not shown in this project -->
</div> <!--/ .international -->
CSS
.international {
background-color: rgb(36, 30, 30);
color: #fff;
letter-spacing: 1px;
padding: 12px 0;
width: 100%;
}
.locale {
display: inline-block;
margin-left: 6px;
vertical-align: middle;
}
.locale a { color: #fff; text-decoration: none; }
.americas, .europe, .korea {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/flags-small.png');
background-repeat: no-repeat;
margin-top: 3px;
}
.americas {
background-position: 0px 0px;
height: 11px;
width: 48px;
}
.europe {
background-position: -48px 0px;
height: 11px;
width: 48px;
}
.korea {
background-position: -96px 0px;
height: 11px;
width: 16px;
}
.intlButton {
float: right;
font-size: 24px;
margin-right: 6px;
}
.intlButton a { color: #444; }
.intlButton i {
background-color: rgba(225, 225, 225, .7);
border-radius: 3px;
padding: 4px;
}