Вывод подменю в определенном месте

@Aleoo · Регистрация: 18.05.2014

Author24 — интернет-сервис помощи студентам

Добрый вечер! Как сделать так, чтобы при наведении мышью на пункт меню, всплывало подменю этого пункта в определенном месте на странице, как на рисунке.

Вот ссылка на сам код: [del]

@Serious_Alex · 08.07.2017, 21:12

Я бы сделал при помощи jquery. http://api.jquery.com/hover/

@aj17 · 10.07.2017, 01:06

Набросал на коленке. Оч не гибкий, но возможно вам подойдет данный пример

PHP/HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            list-style-type: none;
            font: 16px/24px Arial;
        }
        
        a {
            text-decoration: none;
            color: chocolate
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        .one {
            position: relative;
            width: 960px;
            margin: 0 auto;
            padding: 10px;
            padding-left: 300px;
        }
        
        .dote {
            background: green;
            border: 2px solid #fff;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            position: absolute;
            top: 247px;
            left: 604px;
            z-index: 1;
        }
        
        .nav {
            position: absolute;
            top: 10px;
            left: 0;
            width: 280px;
        }
        
        ul {
            background: #fafafa;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        
        li a {
            display: block;
            padding: 10px;
            height: 44px;
            position: relative;
            overflow: hidden;
        }
        
        li a:hover {
            background: #fff;
        }
        
        .drod-nav {
            display: none;
            position: absolute;
            top: 250px;
            left: 615px;
            width: 100%;
        }
        
        .show-drop:hover~.drod-nav,
        .cheker:checked~.drod-nav {
            display: block;
        }
        
        img {
            border-radius: 4px;
            display: block;
            vertical-align: top;
        }
        
        label {
            display: block;
            cursor: pointer;
        }
        
        .show-drop label:after {
            content: ' click me ';
            position: absolute;
            top: -104px;
            left: 0;
            right: 0;
            height: 44px;
            background: #Eee;
            padding: 10px;
            display: block;
            color: red;
        }
        
        .show-drop:hover label:after,
        .cheker:checked~.show-drop label:after {
            top: 0;
        }
 
    </style>
</head>
 
<body>
    <div class="one">
        <div class="dote"></div>
        <ul class="nav">
            <li>
                <input class="cheker" id="one" hidden type="checkbox">
                <a class="show-drop" href="#"><label for="one">hover me</label></a>
                <ul class="drod-nav">
                    <li><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                </ul>
            </li>
            <li><a href="#">Залетают!</a></li>
            <li><a href="#">Грамматики.</a></li>
        </ul>
        <img src="http://www.placehold.it/650x480" alt="">
 
    </div>
</body>
 
</html>

@Aleoo 1 / 1 / 0 Регистрация: 18.05.2014 Сообщений: 62
		1
	Вывод подменю в определенном месте 08.07.2017, 17:43. Показов 835. Ответов 2 Метки нет (Все метки) Добрый вечер! Как сделать так, чтобы при наведении мышью на пункт меню, всплывало подменю этого пункта в определенном месте на странице, как на рисунке. Вот ссылка на сам код: [del] 0

@Serious_Alex 1 / 1 / 1 Регистрация: 29.10.2016 Сообщений: 5
	08.07.2017, 21:12	2
	Я бы сделал при помощи jquery. http://api.jquery.com/hover/ 0

	10.07.2017, 01:06