У меня есть страница HTML/CSS на ходу прямо сейчас, где посередине есть карта изображения. С левой стороны у меня есть меню аккордеона в CSS. Идея заключается в том, что когда пользователь открывает меню аккордеона, когда они переходят на следующую страницу, нажимая на часть изображения, аккордеон останется открытым для этого места. Это для обучения. Таким образом, инструкции находятся на левой стороне, и они могут сделать это на карте изображения посередине. Вот CSS У меня есть для аккордеона:CSS Сохранение меню аккордеона при изменении страницы
Вот это таблица стилей:
body {
background-color: #000000;
}
div.img {
float: right;
Border: 1px solid white;
}
.right {
margin: auto;
}
.accordion {
width: 350px;
box-shadow:
0px 0px 0px 1px rgba(12,12,12,0.3),
0px 2px 2px rgba(0,0,0,0.1);
Float: left;
Position: fixed;
}
.accordion label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: Relative;
display: block;
height: 30px;
cursor: pointer;
color: #FFFFFF;
line-height: 33px;
font-size: 19px;
background: #3333ff;
border: 1px solid #CCC;
}
.accordion name:hover {
background: #F3FF3F3;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
background: #ff2000;
color: #FFFFFF;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
display: none;
}
.accordion .content {
background: rgb(255, 255, 255);
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .content p {
font-family: "Arial";
color: #777;
font-size: 14px;
padding: 20px;
}
.accordion input:checked ~ .content {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .content.ac-medium {
height: 195px;
}
А вот HTML:
<html>
<head>
<p style="color:white;float:top-left;font-family:Arial;font-size:25px;margin-bottom:0px;">Title</p>
<p style="color:white;float:top-left;font-family:Arial;font-size:15px;margin-top:0px;margin-bottom:0px;"> Subtitle</p>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<br>
<br>
<div class="container">
<div class="accordion">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">Description</label>
<div class="content ac-medium">
</p>
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Description</label>
<div class="content ac-medium">
Description
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5">Category</label>
<div class="content ac-medium">
Description
</div>
<div>
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6">Category</label>
<div class="content ac-medium">
Description
</div>
</div>
</div>
</div>
</div>
</div>
<div class="img">
<div class="right">
<img src="CWS.png" width="1200" height="900" usemap="#CWS" />
</div>
</div>
<map name="CWS">
</map>
</html>
Если это может быть в CSS и HTML, который будет будь замечательным, поскольку я не знаком с другими языками. Заранее спасибо за вашу помощь!
EDIT: Итак, после очистки Интернета я нашел то, что кажется многообещающим. Я не ява парень, но я решил дать этому выстрел:
// Initialize Stop Var
var stop = false;
// When the Drop Down is Clicked, Set Stop Var to True
$("#drop-down").click(function(event) { stop=true; });
// Prevent Accordion Close if Stop Var Set
$("#accordion").click(function(event) {
if (stop) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
Я думаю, мой вопрос, как я могу реализовать выше Java для работы с моим кодом. Я не уверен, какие значения изменить «выпадающий» и «аккордеон» на (если мне даже придется менять аккордеон)
Это будет автономно, поэтому не будет никакого кода на стороне сервера.
Edit2:
Похоже, я не могу быть разрешен использовать Java .... есть способ, чтобы не иметь обновление меню при смене экранов?
Для этого вам нужен Javascript ... это невозможно с HTML/CSS. –
Вы ссылаетесь на карту изображения. Вы имеете в виду одну строку? http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap –
Да. Точно так же. – user2022089