shchdmtrii
New Coder
Hello!
I just trying to add one or more "menu" buttons to website.
I've added button, but it's still doesn't work.
How to solve this problem?
And menu buttons Test 0,Test 1, Test 2 wokrs normally without js
Here are parts of html & css codes
Menu
[CODE lang="html" title="Menu" highlight="7, 20, 50"]
<div class="tab">
<input id="tab-0-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs
<input id="tab-1-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs
<input id="tab-2-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs
<input id="tab-3-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs but it doesn't show id="tab-3"
<div class="tab-nav">
<div class="nav" id="nav-0">
<label class="ctrl-label" for="tab-0-ctrl">Test 0</label> wokrs
</div>
<div class="nav" id="nav-1">
<label class="ctrl-label" for="tab-1-ctrl">Test 1</label> wokrs
</div>
<div class="nav" id="nav-2">
<label class="ctrl-label" for="tab-2-ctrl">Test 2</label> wokrs
</div>
<div class="nav" id="nav-3">
<label class="ctrl-label" for="tab-3-ctrl">Test 3</label> wokrs but it doesn't show id="tab-3"
</div>
</div>
<div class="tab-container">
<div class="tab-container-block" id="tab-0" > works
<ul class="grid-view" data-grid="vertical">
<h2>Test 0</h2>
</ul>
<h2>test main</h2>
</div>
<div class="tab-container-block" id="tab-1"> works
<ul class="grid-view" data-grid="vertical">
<h2>Test 1</h2>
</ul>
</div>
<div class="tab-container-block" id="tab-2"> works
<h2>Test 2</h2>
</div>
<div class="tab-container-block" id="tab-3"> isn't shown
<ul class="grid-view" data-grid="vertical">
<h2>Test3</h2>
</ul>
</div>
</div>
</div>[/CODE]
css
[CODE lang="css" highlight="88, 108"].tab {
padding: 0 0 0 8px;
width: 100%;
}
@media screen and (min-width: 1112px) {
.tab {
padding: 0 0 0 16px;
}
}
.tab-nav {
display: flex;
margin-bottom: 10px;
}
.tab-nav > .nav {
border-image-source: url(../images/announcement/tab_normal.png);
border-image-slice: 24 fill;
border-image-repeat: repeat;
border-image-width: 12px;
box-sizing: content-box;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 9px;
position: relative;
color: #fff;
font-size: 1rem;
font-weight: 500;
white-space: nowrap;
width: 100%;
flex: 1;
text-align: center;
}
@media screen and (min-width: 1112px) {
.tab-nav > .nav {
height: 58px;
line-height: 56px;
}
}
.tab-nav > .nav:notlast-child) {
margin-right: 8px;
}
.tab-nav .ctrl-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
cursor: pointer;
margin: 0;
}
.tab-container {
overflow: hidden;
}
.tab-container-block {
display: none;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.tab .ctrl-radios {
display: none;
}
.tab #tab-0-ctrl:checked ~ .tab-container #tab-0 {
display: block;
}
.tab #tab-1-ctrl:checked ~ .tab-container #tab-1 {
display: block;
}
.tab #tab-2-ctrl:checked ~ .tab-container #tab-2 {
display: block;
}
---
added
.tab #tab-3-ctrl:checked ~ .tab-container #tab-3 {
display: block;
}
added
---
.tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 {
border-image-source: url(../images/announcement/tab_active.png);
}
---
added
.tab #tab-3-ctrl:checked ~ .tab-nav #nav-3 {
border-image-source: url(../images/announcement/tab_active.png);
}[/CODE]
css original
[CODE lang="css" title="css original"].tab {
padding: 0 0 0 8px;
width: 100%;
}
@media screen and (min-width: 1112px) {
.tab {
padding: 0 0 0 16px;
}
}
.tab-nav {
display: flex;
margin-bottom: 10px;
}
.tab-nav > .nav {
border-image-source: url(../images/announcement/tab_normal.png);
border-image-slice: 24 fill;
border-image-repeat: repeat;
border-image-width: 12px;
box-sizing: content-box;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 9px;
position: relative;
color: #fff;
font-size: 1rem;
font-weight: 500;
white-space: nowrap;
width: 100%;
flex: 1;
text-align: center;
}
@media screen and (min-width: 1112px) {
.tab-nav > .nav {
height: 58px;
line-height: 56px;
}
}
.tab-nav > .nav:notlast-child) {
margin-right: 8px;
}
.tab-nav .ctrl-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
cursor: pointer;
margin: 0;
}
.tab-container {
overflow: hidden;
}
.tab-container-block {
display: none;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.tab .ctrl-radios {
display: none;
}
.tab #tab-0-ctrl:checked ~ .tab-container #tab-0 {
display: block;
}
.tab #tab-1-ctrl:checked ~ .tab-container #tab-1 {
display: block;
}
.tab #tab-2-ctrl:checked ~ .tab-container #tab-2 {
display: block;
}
.tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 {
border-image-source: url(../images/announcement/tab_active.png);
}
[/CODE]
I just trying to add one or more "menu" buttons to website.
I've added button, but it's still doesn't work.
How to solve this problem?
And menu buttons Test 0,Test 1, Test 2 wokrs normally without js
Here are parts of html & css codes
Menu
[CODE lang="html" title="Menu" highlight="7, 20, 50"]
<div class="tab">
<input id="tab-0-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs
<input id="tab-1-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs
<input id="tab-2-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs
<input id="tab-3-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs but it doesn't show id="tab-3"
<div class="tab-nav">
<div class="nav" id="nav-0">
<label class="ctrl-label" for="tab-0-ctrl">Test 0</label> wokrs
</div>
<div class="nav" id="nav-1">
<label class="ctrl-label" for="tab-1-ctrl">Test 1</label> wokrs
</div>
<div class="nav" id="nav-2">
<label class="ctrl-label" for="tab-2-ctrl">Test 2</label> wokrs
</div>
<div class="nav" id="nav-3">
<label class="ctrl-label" for="tab-3-ctrl">Test 3</label> wokrs but it doesn't show id="tab-3"
</div>
</div>
<div class="tab-container">
<div class="tab-container-block" id="tab-0" > works
<ul class="grid-view" data-grid="vertical">
<h2>Test 0</h2>
</ul>
<h2>test main</h2>
</div>
<div class="tab-container-block" id="tab-1"> works
<ul class="grid-view" data-grid="vertical">
<h2>Test 1</h2>
</ul>
</div>
<div class="tab-container-block" id="tab-2"> works
<h2>Test 2</h2>
</div>
<div class="tab-container-block" id="tab-3"> isn't shown
<ul class="grid-view" data-grid="vertical">
<h2>Test3</h2>
</ul>
</div>
</div>
</div>[/CODE]
css
[CODE lang="css" highlight="88, 108"].tab {
padding: 0 0 0 8px;
width: 100%;
}
@media screen and (min-width: 1112px) {
.tab {
padding: 0 0 0 16px;
}
}
.tab-nav {
display: flex;
margin-bottom: 10px;
}
.tab-nav > .nav {
border-image-source: url(../images/announcement/tab_normal.png);
border-image-slice: 24 fill;
border-image-repeat: repeat;
border-image-width: 12px;
box-sizing: content-box;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 9px;
position: relative;
color: #fff;
font-size: 1rem;
font-weight: 500;
white-space: nowrap;
width: 100%;
flex: 1;
text-align: center;
}
@media screen and (min-width: 1112px) {
.tab-nav > .nav {
height: 58px;
line-height: 56px;
}
}
.tab-nav > .nav:notlast-child) {
margin-right: 8px;
}
.tab-nav .ctrl-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
cursor: pointer;
margin: 0;
}
.tab-container {
overflow: hidden;
}
.tab-container-block {
display: none;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.tab .ctrl-radios {
display: none;
}
.tab #tab-0-ctrl:checked ~ .tab-container #tab-0 {
display: block;
}
.tab #tab-1-ctrl:checked ~ .tab-container #tab-1 {
display: block;
}
.tab #tab-2-ctrl:checked ~ .tab-container #tab-2 {
display: block;
}
---
added
.tab #tab-3-ctrl:checked ~ .tab-container #tab-3 {
display: block;
}
added
---
.tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 {
border-image-source: url(../images/announcement/tab_active.png);
}
---
added
.tab #tab-3-ctrl:checked ~ .tab-nav #nav-3 {
border-image-source: url(../images/announcement/tab_active.png);
}[/CODE]
css original
[CODE lang="css" title="css original"].tab {
padding: 0 0 0 8px;
width: 100%;
}
@media screen and (min-width: 1112px) {
.tab {
padding: 0 0 0 16px;
}
}
.tab-nav {
display: flex;
margin-bottom: 10px;
}
.tab-nav > .nav {
border-image-source: url(../images/announcement/tab_normal.png);
border-image-slice: 24 fill;
border-image-repeat: repeat;
border-image-width: 12px;
box-sizing: content-box;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 9px;
position: relative;
color: #fff;
font-size: 1rem;
font-weight: 500;
white-space: nowrap;
width: 100%;
flex: 1;
text-align: center;
}
@media screen and (min-width: 1112px) {
.tab-nav > .nav {
height: 58px;
line-height: 56px;
}
}
.tab-nav > .nav:notlast-child) {
margin-right: 8px;
}
.tab-nav .ctrl-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
cursor: pointer;
margin: 0;
}
.tab-container {
overflow: hidden;
}
.tab-container-block {
display: none;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.tab .ctrl-radios {
display: none;
}
.tab #tab-0-ctrl:checked ~ .tab-container #tab-0 {
display: block;
}
.tab #tab-1-ctrl:checked ~ .tab-container #tab-1 {
display: block;
}
.tab #tab-2-ctrl:checked ~ .tab-container #tab-2 {
display: block;
}
.tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 {
border-image-source: url(../images/announcement/tab_active.png);
}
.tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 {
border-image-source: url(../images/announcement/tab_active.png);
}
[/CODE]