как зафиксировать меню посли клика мышки

[jatisto]

Есть такая проблема. Сделал меню по вот этому уроку https://www.youtube.com/watch?v=Vcb4DCts1yc, проблема в следующим: Как сделать так, что-бы при нажатии на квадрат, он остовалься в положении как при наведенной мышой на него. И назат не складывалься. (это ссылка на строницу ну там (главная или контакты)). В уроки у него квадрат увеличиваеться при наведении мыши.

Эфект сделан с помощью

 

 

html

 

<div id="conteiner">

<a href="index.html"><div class="menu">
<p class="p1">Sites</p>
<!-- <p class="p2">Paint design</p>
</div>

 

 

 

css

.menu {
    width: 150px;
    height: 100px;
    background-color: #F28802;
    float:left;
    transition:all .5s ease-in-out 0s;
}

 

.menu:hover {
    width: 400px;
}

[antonKar]

Как сделать так, что-бы при нажатии на квадрат, он остовалься в положении как при наведенной мышой на него

1) Через JS

2) Через связку input:checked + menu, но это извращение.

[rus]

2) Через связку input:checked + menu, но это извращение.

почему? работает начиная с 9ИЕ++ а для 8 есть костыль - Selectivizr.

[jatisto]

 

Как сделать так, что-бы при нажатии на квадрат, он остовалься в положении как при наведенной мышой на него

1) Через JS

2) Через связку input:checked + menu, но это извращение.

 

Спасибо за ответ но я с JS пока не очень, если можешь пример в коде может есть. 

[antonKar]

почему?

Извращение с точки зрения архитектуры, если так можно выразиться.

 

Инпуты не для этого предназначены, было бы логичней для этого в CSS делать active для элемента, а не добавлять лишний тег ради этого.

 

можешь пример в коде может есть

 

.menu._active {
width: 400px;
}

 

$(".menu").click(function() { $(this).addClass("_active"); });

[jatisto]

 

 

 

можешь пример в коде может есть

 

.menu._active {

width: 400px;

}

 

$(".menu").click(function() { $(this).addClass("_active"); });

 

Спасибо за ответ! Ща буду пробовать.

[jatisto]

 

 

 

 

можешь пример в коде может есть

 

.menu._active {

width: 400px;

}

 

$(".menu").click(function() { $(this).addClass("_active"); });

 

Спасибо за ответ! Ща буду пробовать.

 

Попробовал немного не то. Решение оказалось очень простым с помощью CSS

 

 

CSS

 

.menu {

    width: 150px;

    height: 100px;

    background-color: #F28802;

    float:left;

    transition:all .7s ease-in-out 0s;

}

.menu:hover, .active {

    width: 250px;

}

 

 

HTML

 

 <a href="sites.html"><div class="menu active">

[antonKar]

Попробовал немного не то. Решение оказалось очень простым с помощью CSS

В каком плане немного не то? Что я ширину в 400 пикселей указал вместо 250? 

[jatisto]

 

Попробовал немного не то. Решение оказалось очень простым с помощью CSS

В каком плане немного не то? Что я ширину в 400 пикселей указал вместо 250? 

 

Не то, в плане я не использовал js ($(".menu").click(function() { $(this).addClass("_active"); }) а, просто css. Хотя как я и говорил я новичок. Возможно что то не так пробовал. Но используя твой способ, к примеру на стронице home. Квадрат становясь в ширина 1024 а, высота где-то 20px а, не 150px на 100px и перескакивает на верх. Неважно какие я значения выстовляю. Хотя я не удевлюсь что я что то не так сделал! Но способ которы я сделал работает.