Подскажите пожалуйста как сделать меню

Автор alik2039, 29-11-2017, 21:45:56

« назад - далее »

alik2039Topic starter

Уважаемые форумчане подскажите пожалуйста, как можно сделать меню с раздвижными вниз подкатегориями DLE 10.2
https://kaknastroit.com/
  •  


wassulmaier

Цитата: alik2039 от 29-11-2017, 21:45:56
Уважаемые форумчане подскажите пожалуйста, как можно сделать меню с раздвижными вниз подкатегориями DLE 10.2

Привыкай брат к тому, что если хочешь, чтобы кто-то копался в твоем дерьме, за это нужно заплатить. Ну а так, кое что я подскажу тебе бесплатно.

1) Создай блок, где будет выводится все элементы меню.
2) С помощью CSS сделать блок невидимым, типы display:none, visibility:invisible
3) С помощью СSS сделать следующее - если на элемент меню ты наводишь курсор, то должен плавно открываться блок с элементами меню. Если нужно сделать, чтобы блок с элементами меню открывался по клику на кнопку, то тут тебе в помощь JS. Это самые простенькие скрипты.

Кстати кружочки - может сделать как img стоящие перед элементами меню.

И рекомендую на ночь не кодить. Иначе хрен уснешь.

Дерзай, салага  :)
Развлекательный сайт- http://www.officeplankton.com.ua.
  •  


alik2039Topic starter

Цитата: wassulmaier от 29-11-2017, 22:20:57
Привыкай брат к тому, что если хочешь, чтобы кто-то копался в твоем дерьме, за это нужно заплатить. Ну а так, кое что я подскажу тебе бесплатно.

1) Создай блок, где будет выводится все элементы меню.
2) С помощью CSS сделать блок невидимым, типы display:none, visibility:invisible
3) С помощью СSS сделать следующее - если на элемент меню ты наводишь курсор, то должен плавно открываться блок с элементами меню. Если нужно сделать, чтобы блок с элементами меню открывался по клику на кнопку, то тут тебе в помощь JS. Это самые простенькие скрипты.

Кстати кружочки - может сделать как img стоящие перед элементами меню.

И рекомендую на ночь не кодить. Иначе хрен уснешь.

Дерзай, салага  :)

Сколько это будет стоить
https://kaknastroit.com/
  •  

Sorokin Vladimir

Цитата: alik2039 от 29-11-2017, 21:45:56
Уважаемые форумчане подскажите пожалуйста, как можно сделать меню с раздвижными вниз подкатегориями DLE 10.2

А «погуглить» тему про выпадающие меню – слабо!?
Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  

alik2039Topic starter

Цитата: Sorokin Vladimir от 30-11-2017, 07:32:27
   А «погуглить» тему про выпадающие меню – слабо!?

нет не слабо, я погуглил но получается ерунда
https://kaknastroit.com/
  •  


Sorokin Vladimir

Цитата: alik2039 от 30-11-2017, 10:42:26
нет не слабо, я погуглил но получается ерунда
а подробней?
Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  

alik2039Topic starter

#6
Цитата: Sorokin Vladimir от 30-11-2017, 07:32:27
   А «погуглить» тему про выпадающие меню – слабо!?
Вот нашел именно то, что мне надо, но не получается его перенастроить под свой шаблон.

Как уже можно было догадаться из названия, для реализации подобного меню у себя на сайте Вам понадобится библиотека jQuery. Если данная библиотека на Вашем сайте еще не была подключена ранее, то следует это сделать следующим образом:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Дальше необходимо прописать CSS стиль для нашего меню. Чтобы оно выглядело точно так же как и в примере, приведенном выше, используйте следующее оформление:
<style type="text/css">
ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
  width: 250px;
}

ul#menu a,ul#menu span { display: block; text-decoration: none; }

ul#menu li { margin-top: 1px; }

ul#menu li a,ul#menu li span {
  background: #333333;
  color: #FFFFFF;
  padding: 7px;
}

ul#menu li a:hover,ul#menu li span:hover { background: #000000; }

ul#menu li ul li a {
  background: #CCCCCC;
  color: #000000;
  padding-left: 20px;
}

ul#menu li ul li a:hover {
  background: #AAAAAA;
  border-left: 5px #000000 solid;
  padding-left: 15px;
}
</style>
Меню, которое будет раздвигаться и сдвигаться при клике по его пунктам, следует прописать следующим образом:
<ul id="menu">
<li><span>Скрипты</span>
    <ul>
     <li><a href="log_info.php">Скрипт записи логов</a></li>
     <li><a href="current_time.php">Текущая дата и время</a></li>
     <li><a href="slide_show_jquery.php">Слайдшоу на jQuery</a></li>
     <li><a href="scroll_to_top.php">Кнопка вверх</a></li>
    </ul>
</li>
<li><span>Онлайн сервисы</span>
    <ul>
        <li><a href="csscompressor.php">Сжатие CSS кода онлайн</a></li>
        <li><a href="javascriptcompressor.php">Сжатие JavaScript кода</a></li>
        <li><a href="opennet.php">Калькулятор диапазонов IP</a></li>
        <li><a href="qrcoder.php">Онлайн генератор QR кодов</a></li>
        <li><a href="gtmetrix.php">Анализ скорости сайта</a></li>
    </ul>
</li>
<li><a href="">Поддержка</a></li>
<li><a href="">Форум</a></li>
<li><span>Хитрости</span>
    <ul>
        <li><a href="csssprites.php">Использование CSS спрайтов</a></li>
        <li><a href="rgb_cod_color.php">HEX и RGB коды цветов</a></li>
        <li><a href="no_www.php">Убрать www из адреса сайта</a></li>
    </ul>
</li>
</ul>
Теперь остается лишь где-нибудь в конце странички добавить наш JavaScript код, который будет отвечать за сворачивание и разворачивание меню (его подпунктов). Для этого скопируйте себе данный JavaScript код:
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li span").click(function() {
    $("#menu ul:visible").slideUp("normal");
    if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
        $(this).next().slideDown("normal");
    }
});
});
</script>

Помогите адаптировать это меню под мой сайт, не получается изменить размер шрифта, ну и чтобы вписывалось в мой сайт. Заранее спасибо.

Добавлено: 30-11-2017, 11:01:41


Цитата: Sorokin Vladimir от 30-11-2017, 10:50:48
а подробней?
Хочется, что бы под категории основных категорий (компьютер, операционная система, смартфоны и телефоны) открывались нажав на них
https://kaknastroit.com/
  •  

Sorokin Vladimir

давайте  сделаем по другому, напишите куда мне скинуть архивчик с подборкой менюшек, которые я много раз вставлял в свои шаблоны -  посмотрите они все очень просы в настройках стилей (цвет, шрифт и тд), потому что залазить в код вашего сайта (я так понял он на DLE) это последнее дело.
Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  


alik2039Topic starter

Цитата: Sorokin Vladimir от 30-11-2017, 11:29:48
давайте  сделаем по другому, напишите куда мне скинуть архивчик с подборкой менюшек, которые я много раз вставлял в свои шаблоны -  посмотрите они все очень просы в настройках стилей (цвет, шрифт и тд), потому что залазить в код вашего сайта (я так понял он на DLE) это последнее дело.
Вот мой адрес alik2039@yandex.ru, буду вам при много благодарен. Огромное спасибо, Буду ждать. Спасибо
https://kaknastroit.com/
  •  


Sorokin Vladimir

Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •