Умные головы подскажите

Общее
1

есть код
html:

            <div>
                <input type="radio" name="menu" id="menu1">
                <label class="hr" for="menu1">меню1</label>
            </div>
            <div>
                <input type="radio" name="menu" id="menu2">
                <label class="hr" for="menu2">меню2</label>
            </div>
            <div>
                <input type="radio" name="menu" id="menu3">
                <label class="hr" for="menu3">меню3</label>
            </div>

css:

label {
position: relative;
cursor: pointer;
}
.hr {
width:100px;
height:30px;
background-color:lightblue;
display:flex;
align-items:center;
justify-content:space-around;
}
input[type=“radio”] {
display: none;
}

input[type=“radio”]:checked ~ .hr {
background-color:blue;
color:white;
}

Это как бы мое будущее горизонтальное меню. Не могу понять как связать с этими пунктами меню дивы (их в коде нету), чтобы при выборе определенного пункта меню у определенного дива менялся ну к примеру z-index

2

Я раз пять перечитала ваш вопрос…) То ли голова не достаточно умная, то ли не хватает исходных данных. Например, какие “дивы” имеются ввиду и для чего они будут использованы?..

3

В них будут храниться таблицы с прайс листами. Располагаться они будут один на другом.
Я хотел с помощью z-index менять отображаемый див. Но не могу понять как связать их
с радио кнопками.Могу дописать код если не понятно ))) но писать особо нечего так то) по сути обычное подменю должно вылезать, но не при наведении, а при активации радио кнопки.

4

Таблица в отдельном окне будет появляться или просто на странице? В принципе я примерно понимаю уже о чем речь. Код допишите, если не трудно. Завтра попробую. Сегодня поздно уже(

5

хорошо сейчас допишу :slight_smile: завтра буду ждать
меню будет слева, справа от меню будут вылезать дивы, все на одной странице

6

Хорошо)

7

так как код удалил допишу к имеющемуся, ведь главное понять принцип :slight_smile:
html:

    <div class="prais-menu">
           <div class="conteiner-menu" 
           <div>
            <input type="radio" name="menu" id="menu1">
            <label class="hr" for="menu1">меню1</label>
        </div>
        <div>
            <input type="radio" name="menu" id="menu2">
            <label class="hr" for="menu2">меню2</label>
        </div>
        <div>
            <input type="radio" name="menu" id="menu3">
            <label class="hr" for="menu3">меню3</label>
        </div>
          </div>
          <div class="conteiner-prais">
                <div class="prais n1"></div>
                <div class="prais n2"></div>
                <div class="prais n3"></div>
          </div>
      </div>

css:

.prais-menu {
width:1200px
height:500px;
margin-right:auto;
margin-left:auto;
position:relative;
}
.conteiner-menu {
position:relative;
float:left;
width:100px;
height:500px;
display:flex;
align-items:center;
justify-content:space-around;
}
label {
position: relative;
cursor: pointer;
}
.hr {
width:100px;
height:30px;
background-color:lightblue;
display:flex;
align-items:center;
justify-content:space-around;
}
input[type=“radio”] {
display: none;
}

input[type=“radio”]:checked ~ .hr {
background-color:blue;
color:white;
}
.conteiner-prais {
width:1000px;
height:500px;
float:left;
position:relative;
}
.prais {
width:1000px;
height:500px;
position:absolute;
top:0px;
left:0x;
}
.n1 {
background-color:red;
z-index:5;
}
.n2 {
background-color:green;
z-index:4;
}
.n3 {
background-color:red;
z-index:3;
}

Код писал прямо тут с головы.Не проверял работоспособность, но идею с него понять думаю можно.Надо как то сделать так, что бы при выделении кнопки menu1( к примеру) див с классом n3 ( к примеру) менял свои z-index на максимальный, или можно через opacity сделать, но это уже не принципиально, главное понять как их связать между собой.

8

Только так получилось…
http://codepen.io/IneSSka/pen/JGQxzq

1 лайк
9

Спасибо большое :slight_smile: это то, что надо.Я уж подгоню под нужный формат.Сижу пытаюсь понять что я делал не так в первый.

10

У вас таблицы в отдельном контейнере были. У меня не получилось сделать без изменения HTML-кода.
Если придумаете что-нибудь другое, то поделитесь. Мне интересно)

11

Хорошо :slight_smile: Я просто пытаюсь, понять, почему я их отдельно с самого начала делал. Собрался с духом доделать эту страничку :slight_smile: не без вашей помощи. Доделаю покажу!

3 лайка