Jump to content
Sign in to follow this  
Absalem

Как "просмотреть код" верстки в выпадающем меню?

Recommended Posts

Здравствуйте! Знаю, что вопрос тупой, но в интернете не могу найти информацию (

Дело в том, что я делаю свой магазинчик самостоятельно, и чтобы править вёрстку, нажимаю на нужный мне элемнт правой кнопкой и жму "Посмотреть код"(гугл хром), а дальше уже в коде поправляю и смотрю, как лучше сделать, и только после этого лезу в файлы сайта править код.

И я никак не могу понять, как можно провернуть нечто похожее с выпадающими меню! Оно выпадает - я жму "Посмотреть код" - оно исчезает и я вижу код других элементов страницы.

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

 

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

Share this post


Link to post
Share on other sites

<ul>

<li>1 уровень</li>

<li>

<ul>

<li> 2 уровень </li>

</ul>

</li>

Share this post


Link to post
Share on other sites

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

Вот картинка, может понятнее будет.

 

111122.jpg

Share this post


Link to post
Share on other sites

 

<div id="menu">
  <ul>
    <li>
      <a href"#">Ссылка в меню 1</a>
    </li>
    <li>
      <a href"#">Ссылка в меню 2</a>
    </li>
    ***
    <li>
      <a href"#">Ссылка с выпадающим списком</a>
    <div>      <----------  Вот у этого div убрать display:none, либо в element.style добавить display:block
      <ul>
        <li><a href="#">Ссылка внутри выпадающего меню</a>  
      </ul>  
      </div>  
    </li>     
    ***
    <li>
      <a href"#">Ссылка в меню 4</a>
    </li>    
  </ul>

 

  • +1 1

Share this post


Link to post
Share on other sites

Когда щелкаете Просмотреть код на элемент выпадающего меню, в открывшейся панели хрома справа во вкладке Styles вверху написано Filter  :hov - щелкаем на :hov и отмечаем галочку :hover, это имитирует событие наведения мышью - не знаю, что вы там именно не можете посмотреть, но может помочь, в некоторых случаях.

  • +1 1

Share this post


Link to post
Share on other sites
В 18.02.2017 в 14:31, cloudrc сказал:

Спасибо, способ работает!


    <div>      <----------  Вот у этого div убрать display:none, либо в element.style добавить display:block

 

 

Share this post


Link to post
Share on other sites
В 18.02.2017 в 14:43, efremovav сказал:

Когда щелкаете Просмотреть код на элемент выпадающего меню, в открывшейся панели хрома справа во вкладке Styles вверху написано Filter  :hov - щелкаем на :hov и отмечаем галочку :hover, это имитирует событие наведения мышью - не знаю, что вы там именно не можете посмотреть, но может помочь, в некоторых случаях.

 

В некоторых случаях действительно помогло :) Большое спасибо!

Share this post


Link to post
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.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

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

Sign in to follow this  

  • Similar Content

    • By Deiccide
      Наш сайт - https://redpandashop.ru/
      OpenCart 2.3.0.2.3
      Текущий магазин сделан на основе шаблона http://modern-v2.aridius.ru/
       
      ТЗ на правки https://docs.google.com/document/d/16nxa0izuzZWWgbMhUsa8NQsB0P3l1OoYZJDL5lIYW8c/edit

      Макеты - https://www.figma.com/file/aV6CwNCbVklktXrVhQii4t/RedPanda?node-id=0%3A1
      Прототип - https://9z17vj.axshare.com/#g=1
       
      По большей части нужно лишь обновить стили сайт + переделать некоторый функционал (такого немного)
      Бюджет обсуждаем

      Сперва все работы нужно будет сделать на тестовой версии, после тестов - перенос на боевую. 
    • By KIRKIRKIR
      Добрый день - нужно, что бы карточки товара при выборе, при нажатии на список https://prnt.sc/vknrfy выглядели так:  https://prnt.sc/vknn8o 
      (изображение под ним статус склада ) |+ арт(SKU) |+ название |+ цена+акция если есть |+ кнопка в корзину + купить в 1 клик  
      при нажатии на список https://prnt.sc/vknrfy
       
       
      сколько это будет стоит и сколько времени займет? В ЛС 
    • By Blaut
      Добрый день!

      Требуются правки сайта на Opencart 2.3. Сайт не завершен, работы по созданию сайта были прерваны из-за пандемии на финальном этапе. Сейчас работы возобновляются, нужно исправить отловленные баги и починить функционал.

      Техзадание: https://docs.google.com/document/d/1psE6f4ZNQdIX84VEXto9VXQ9UARoDSaHUrGsGPQJNiA/edit?usp=sharing

      Работы планируются разного плана. Как программирование, например, починить калькулятор доставки, так и верстка в виде банального исправления кнопок. Плюс немного доработать OCFilter. Прошу назвать цену, схему оплаты и срок выполнения работы в ЛС. За выходные изучу предложения и отвечу.

      Спасибо!
    • By VladOlymp
      Всем доброго времени суток.

      Нужно доработать сайт, под ключ.
      Ищется только специалист с хорошим опытом, который сможет взяться за проект комплексно и выполнить все в оговоренные сроки.
      Бюджет 300$
      Т.З. прикрепил.
      Все вопросы и предложения в л.с.


       
      Т.З..docx
    • By owner1
      Доброго времени суток. Сайт: https://элит-маркет.рф/. OcStore 2.3. Тема Lightshop. Нам внедрили CRM битрикс 24. При добавлении онлайн-чата на сайт возникают проблемы с версткой - нету иконки чата и при наведении на значок смайлика или кнопку "отправить" баги появляются (см. скрин), нужно исправить. Чат пока выключен.
       
      Просьба: цены писать в лс.

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.