у меня разрешение 1920х1080, когда я уменьшаю разрешение, длинное меню залезает под короткое.
Как сделать так, что бы оно сжималось и адаптировалось с помощью flexbox?
Вот весь код на Codeopen
body {
font-size: 14px;
}
a {
text-decoration: none;
color: red;
}
a:after {
text-decoration: none;
}
ul {
display: flex;
list-style: none;
}
ul.tom_menu li {
padding: 15px;
background-color: #9acfea;
}
ul.tom_menu1 li {
padding: 15px;
background-color: #00ee00;
}
.menu {
display: flex;
}
.no-padding {
padding: 0!important;
}
Ответ
Пример на все случаи жизни: The markup for all examples illustrated below are identical as follow: The CSS code provided in each of the demo below can be toggled. They are written in the flavour of Sassy CSS. Equal width elements This is the equivalent of specifing each element to be an equal fraction of its parent's full width, i.e. each fraction is of identical size and the sum of their widths is equivalent to the parent's full width. This effect is achieved with the help of The property tells the browser to grow the items equally until they fill the full width of their flex parent, which is the Of course, this effect can be easily replicated with the good old CSS float and percentage width trick, but this will require knowing the number of children before hand, or else one will have to calculate the percentage width with JS instead. Proportionate, content-based width In other words, the width of each element will be proportionate to its relative width compared to the parent. This ensures a more balanced layout in the sense that wider menu items get more spacing Here, we use the property Like the previous example, Equally spaced elements + natural width + centered within parent This is one of the more complicated examples that require a lot of CSS-hacking — without the flexbox specification, one has to set each item to an inline element and then justify them. The trick here is to declare the wrapping container, Mixing flexbox with CSS transforms Mixing flexbox with CSS transforms
$(function(){
$('.css-toggle')
.next().hide()
.end().click(function(e){
e.preventDefault();
if($(this).data('toggle') == 1) {
$(this).data('toggle', 0).html('Show CSS').next().slideUp();
} else if(!$(this).data('toggle') || $(this).data('toggle') == 0) {
$(this).data('toggle', 1).html('Hide CSS').next().slideDown();
}
});
});
@import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
box-sizing: border-box;
}
body {
background-color: #eee;
color: #333;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5em;
}
header, section {
background-color: #fff;
margin: 0 auto 2rem;
padding: 1rem 2rem 2rem;
width: 80%;
}
h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1.2em;
margin-bottom: 1.5rem;
}
h1 {
font-size: 2rem;
text-align: center;
}
h2 {
font-size: 1.25rem;
margin-bottom: .5rem;
}
a {
color: #b13131;
text-decoration: none;
}
p {
margin-bottom: 1.5rem;
}
h2 + p {
color: #757575;
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
letter-spacing: 1px;
margin-top: -.5rem;
text-transform: uppercase;
}
p code {
background-color: rgba(251, 175, 93, 0.25);
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 4px;
display: inline-block;
margin: 0 .25rem;
padding: 0 .25rem;
}
p.note {
background-color: #C4DF9B;
border-left: 0.5rem solid rgba(0, 0, 0, 0.25);
padding: 1rem;
}
pre {
background-color: rgba(0, 0, 0, 0.75);
border-left: 0.5rem solid rgba(0, 0, 0, 0.5);
color: #FBAF5C;
margin: 0;
padding: 1rem;
}
ul {
border-bottom: 1px solid #ccc;
list-style: none;
margin: 0 0 1.5rem 0;
padding: 0;
}
li {
background-image: linear-gradient(to bottom, transparent 50%, #a2d39c 50%, #a2d39c 95%, #7cc576 95%);
background-size: 100% 200%;
background-position: top center;
color: #666;
display: block;
text-align: center;
text-decoration: none;
transition: all .25s ease-in-out;
}
li:hover {
background-position: bottom center;
color: rgba(0, 0, 0, 0.75);
}
li a {
color: #666;
display: block;
padding: 1rem 0;
transition: all .25s ease-in-out;
}
.css-toggle {
background-color: #ddd;
color: #333;
display: block;
padding: .5rem 1rem;
text-decoration: none;
text-align: center;
transition: all .25s ease-in-out;
}
.css-toggle:hover {
background-color: #FBAF5C;
color: #333;
}
#sc1 ul {
display: flex;
width: 100%;
}
#sc1 ul li {
flex: 1 1 100%;
}
#sc2 ul {
display: flex;
width: 100%;
}
#sc2 ul li {
flex: 1 1 auto;
}
#sc3 {
display: flex;
justify-content: center;
}
#sc3 ul {
display: flex;
}
#sc3 ul a {
padding: 1rem 2rem;
}
[id^='fun'] ul {
background-color: #eee;
border: 0;
display: flex;
padding: 0 2rem;
position: relative;
left: -2rem;
width: calc(100% + 4rem);
}
[id^='fun'] ul li {
background-image: linear-gradient(to bottom, transparent 50%, #448ccb 50%, #448ccb 95%, #0072bc 95%);
flex: 1 1 auto;
}
[id^='fun'] ul li a:hover {
color: #eee;
}
#fun1 ul li {
border-left: 2px solid #ddd;
transform: skew(-15deg);
}
#fun1 ul li:last-child {
border-right: 2px solid #ddd;
}
#fun1 ul li a {
transform: skew(15deg);
}
#fun2 li:hover {
transform: scale(1.2);
}
Navigation menus using CSS flexbox
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Work">Work</a></li>
<li><a href="#" title="Resources">Resources</a></li>
<li><a href="#" title="Meta">Meta</a></li>
</ul>
</nav>Scenario 1
flex: 1 1 100% on the flex items, which is a shorthand for:flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;<ul> element in this case. The flex-basis of 100% ensures that all items will be the same size and treated equally.nav {
& ul {
display: flex;
width: 100%;
& li {
flex: 1 1 100%;
}
}
}Scenario 2
flex: 1 1 auto on the children element. It is the shorthand of:flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;flex-grow: 1 allows the children to grow when necessary, but on the condition that the width of each element is based on the size of its content. The latter is achieved with the help of flex-basis: auto.nav {
& ul {
display: flex;
width: 100%;
& li {
flex-grow: 1;
}
}
}Scenario 3
<nav>, as well as the list itself, as flex displays — but we only apply the justify-content: center; property to the wrapping container.nav {
display: flex;
justify-content: center;
& ul {
display: flex;
& a {
padding: 1rem 2rem;
}
}
} Fancy example 1
Fancy example 2
Думаю будет полезно.
Комментариев нет:
Отправить комментарий