Jump to content
  • 0

Раскрывающаяся область, как оптимальнее реализовать?

master-kyk

Asked by master-kyk,

 Share

Question

master-kyk Explorer

master-kyk

Posted
Posted

Уважаемые гуру, прошу не пинать если я банален, но пытаясь делать первые шаги в верстке не сразу адекватно воспринимаешь весь поток информации)).

 

Подскажите как лучше сделать такую штуковину:

 

Есть блок, по аналогии с пунктом меню - при наведении на пункт меню вываливается еще несколько скрытых до этого пунктов подменю. А как можно сделать чтобы при нажатии на какой то квадратик на странице, к примеру 50х50, она разворачивалась в больший квадратик допустим 100х100.

 

И можно ли это сделать простыми методами?

Link to comment
Share on other sites

25 answers to this question

Recommended Posts

  • 0
Great Rash Explorer

Great Rash

Posted
Posted

1) для такого поведения можно задействовать JavaScript

 

2) если хочется на чистом HTML/CSS, то нужно посмотреть какие элементы поддерживают псевдокласс :active, и на active повесить transition.

Link to comment
Share on other sites
  • 0
master-kyk Explorer

master-kyk

Posted
  • Author
Posted

JavaScript я вряд ли смогу освоить, с HTMLем бы разобраться)). Просто я часто вижу различные меню, выпадающая часть которых то появляется, то исчезает, вот и подумал а почему бы не использовать это в своей галереи для блоков с текстом.

Link to comment
Share on other sites
  • 0
master-kyk Explorer

master-kyk

Posted
  • Author
Posted

Вот, собственно над чем сейчас работаю-осваиваю (Сильно не пинайте, пишу с оглядкой на различные примеры из сети и примеры).

 

Блок .box1 - должен будет при нажатии на его ссылку, развернуть возле себя скрытую область.

<!DOCTYPE html><html><head>    <title>галерея</title><meta name="description" content="website" /><meta name="keywords" content="enter your keywords here" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=Edge">    <link rel="stylesheet" href="css/style.css" type="text/css">    <link href='http://fonts.googleapis.com/css?family=Jura:500&subset=latin,cyrillic' rel='stylesheet' type='text/css'><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><div class="wrap">    <div class="box1"><a href="info.html">text</a></div>    <div class="box2"><a href="info.html">text</a></div>        <div class="box3"><a href="info.html">text</a></div>        <div class="box4"><a href="info.html">text</a></div>        <div class="box5"><a href="info.html">text</a></div>    <div class="box6"><a href="info.html">text</a></div>    <div class="box7"><a href="info.html">text</a></div>            </div>        <footer>footer    </footer>    </body></html>
html, body {height: 100%;margin: 0;    padding:0;    font-family: 'Jura', sans-serif;}.wrap {width: 960px;max-width: 960px;height:100%;margin: 0 auto;position: relative;}footer {    border-top: solid 1px #fff;width: 960px;    position: relative;margin: 0 auto;}.box1 {width: 50px;height: 50px;position: absolute;}
Link to comment
Share on other sites
  • 0
master-kyk Explorer

master-kyk

Posted
  • Author
Posted (edited)

Это немного не то)). Я планировал, что человек открыл квадратик с фото или с несколькими фотками и может на содержимое смотреть не держа кнопку мыши)), как на простую страницу, только вложенную внутри большей странице и привязанной одним краем к своему квадрату.

 

Сейчас наткнулся на такой, довольно простой пример, http://javascript.ru/forum/dom-window/46783-raskryvayushhijjsya-i-svorachivayushhijjsya-po-kliku-div.html

 

Это подойдет для открытия и скрытия блока текста или фото?)

И еще, на одном из ресурсов читал упоминание что, мол поисковики не любят скрытые блоки и могут сайт забанить)), это правда?

Edited by master-kyk
Link to comment
Share on other sites
  • 0
master-kyk Explorer

master-kyk

Posted
  • Author
Posted (edited)

Неплохо для начала выходит))

 

http://jsfiddle.net/d5dj3/1/

 

Теперь нужно понять как управлять размерами или координатами открывания этих окон)).

 

И в примере блоки были все одинаковые, а у меня разные(, теперь нужно научить их закрываться при открытии другого блока.

Edited by master-kyk
Link to comment
Share on other sites
  • 0
orange_juice Explorer

orange_juice

Posted
Posted

 

Первый раз встречаю такие элементы)), мне как новичку наверно будет проще с явой разобраться, поскольку примеров много и людей разбирающихся)).

 

вам, как новичку, лучше бы сперва разобраться как раз в способах через html+css, а уже js подождёт. а то может получиться так, что и в хтмл, и в js реализации не разберетесь

Link to comment
Share on other sites
  • 0
Ironimus Explorer

Ironimus

Posted
Posted

Ironimus, а с помощью этих методов можно сделать, чтобы окна закрывались обратно, а не открывались все вместе?

 

Да. просто поменяйте в инпатах type="checkbox" на type="radio" и добавьте в них же атрибут name="spoiler" (значение этого атрибута может быть любым, главное чтоб в тех инпатах которые должны быть связаны должно быть одинаковое имя).

Link to comment
Share on other sites
  • 0
myRoot Explorer

myRoot

Posted
Posted

Мой вариант лучше, так как мой спойлер можно скрыть кликнув на него повторно, а в твоем случае надо кликнуть на что нибудь кроме этого элемента. 

У твоего варианта есть плюсы, я не спорю! Но он не выполняет поставленной задачи.

Перечитай задание!!! При нажатие на квадрат он должен увеличиться в размерах.

Тогда лучше так http://jsfiddle.net/7vasko/3ALeV/2/

Link to comment
Share on other sites
  • 0
master-kyk Explorer

master-kyk

Posted
  • Author
Posted

Уважаемые гуру, а подскажите - можно ли при выполнении разворачивания блока,  не только открывать его содержимое но и к примеру изменять размер шрифта и цвет? Допустим в первоначальном блоке текст 12px черный а в раскрывшемся 14px белый.

http://jsfiddle.net/LBz9N/4/

Link to comment
Share on other sites
  • 0
Ironimus Explorer

Ironimus

Posted
Posted (edited)

Да. просто измените те свойства которые вам надо, но надо их явно определять, например, если вы не знаете стандартной высоты шрифта, но хотите ее увеличить псевдокласом — она изменится, но без анимации. В вашем случае так.

Edited by Ironimus
Link to comment
Share on other sites
  • 0
myRoot Explorer

myRoot

Posted
Posted (edited)

Уважаемые гуру, а подскажите - можно ли при выполнении разворачивания блока,  не только открывать его содержимое но и к примеру изменять размер шрифта и цвет? Допустим в первоначальном блоке текст 12px черный а в раскрывшемся 14px белый.

http://jsfiddle.net/LBz9N/4/

Так хотел

Edited by myRoot
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • tohastar
      Упорядочить страницы карты сайта тегами div
      By tohastar
      Здравствуйте! Помогите разобраться. Для детского садика требуется создать карту сайта по новым требованиям. Карту создали с помощью генератора, внесли небольшие изменения в код, но теперь хочется упорядочить блоки по модулям на 4 столбика, как добавить новые столики понятно, главное их упорядочить. Т.е. для примера модуль подменю "важная информация" находится с верху и относящиеся к нему страницы вниз и так далее. Но к сожаление не понятно, как это можно реализовать, все добавленные вновь страницы идут последовательно вниз. Пришлось отделять тегами < p>, но вверх поднять их не получается.  http://vasilyek78.ucoz.ru/Dokument/SiteMap.html адрес расположения карты сайта.
    • Алеся
      Размещение фоновой картинки, заключенной в div, на всю ширину вьюпорта
      By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • cozy_eternity
      Скрытие и показ div
      By cozy_eternity
      Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь..

       
      <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
    • konoplev_ps
      Не меняется размер/цвет/тип шрифта внутри div
      By konoplev_ps
      Добрый день.
      Проблема: Настраиваю в отдельном CSS стили для шрифтов h1, h2 и т.д., но когда начинаю их применять внутри тега div - не вижу изменений. Сам CSS подключил, в нем и другие настройки стилей, которые успешно применяются к файлу html.
    • Bourdun
      Товар переносится на новую строку
      By Bourdun
      Проблема с товарами. Не получается перенести товар так, чтобы он был справа от первого, а не под ним

      И да, float:right; переносит вообще в самое право самой страницы
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept