Jump to content

How to add menu buttons and make them work ?

Recommended Posts


Hello, forum!
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 new buttons work?


And menu buttons Test 0,Test 1, Test 2 wokrs normally only on html & css
without js


Here are parts of html & css codes

---

menu

<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>

menu

---

---

css

.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:not(:last-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);
}
added
---

css

---

---

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:not(:last-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);
}

css original

---

Link to comment
  • Replies 1
  • Views 301
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.