Форум

Malleys · #**161** (**permalink**) 06.04.2019, 13:44

Сообщение от Блондинка

я же хочу чтобы по умолчанию при загрузке страницы уже было "прокрученно"

Чтобы такое заработало, вам нужно добавить p.scrollIntoView();

Было...

p.innerHTML = link.innerHTML;
	link.parentNode.replaceChild(p, link);
} else {
	link.className = classes[level];

Стало...

p.innerHTML = link.innerHTML;
	link.parentNode.replaceChild(p, link);
	p.scrollIntoView();
} else {
	link.className = classes[level];

Блондинка · #**162** (**permalink**) 07.04.2019, 03:24

Malleys,
не подскажешь как правильно совместить

Сообщение от Malleys

Можно тень сделать вокруг области при помощи функции drop-shadow свойства filter, но я думаю, вдруг вам потребуется залить картинку туда...

Можно ещё сделать так...

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
	<style>
		svg {
			width: 300px;
			height: 120px;
		}
	</style>
	<svg viewBox="-5 -5 310 130">
		<style>
			path {
				stroke: #f06;
				stroke-width: 10px;
				fill: none;
			}
		</style>
		<path d="M 0 0 L 300 0 L 300 100 L 150 120 L 0 100 z"></path>
	</svg>
</body>

</html>

с ссылками из <div id="menu2">

<!DOCTYPE html>
<html>
<head>
	<title>transform</title>
	<style>
		body { font: 14px normal Times, serif; position: relative; }
		div { border: 1px solid #999; padding: 5px; margin: 5px; }
		a { text-decoration: none; } 
		a:active, a:link { color: #005aff; } 
		a:visited { color: #5995ff; } 
		a:hover { color: #7a00ff; }
		.act { color: #f0f0f0; text-shadow: 1px 1px #009900, 1px -1px #009900, -1px 1px #009900, -1px -1px #009900, 1px 0px #009900, -1px 0px #009900, 0px 1px #009900, 0px -1px #009900; }
		a.efg:active, a.efg:link { color: #167016; }
		a.def:active, a.def:link { color: #127a12; }
		a.cde:active, a.cde:link { color: #0d850d; }
		a.bcd:active, a.bcd:link { color: #068f06; }
		a.abc:active, a.abc:link { color: #009900; }
                #menu1 { height: 30px; overflow-x: scroll; white-space: nowrap; }
                #menu2 { height: 40px; overflow-x: scroll; white-space: nowrap; border: 1px solid transparent; border-top-color: #999; }
                #menu1 a { width: 23%; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
                #menu2 a { width: 18%; height: 29px; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #999; border-radius: 8px 8px 0 0 / 5px 5px 0 0; margin: 0 0 2px; padding: 5px; }
                #menu3, #menu4, #menu5 { width: 212px; height: 160px; overflow-y: scroll; }
                #menu_right { width: 214px; border: none; position: absolute; right: 10px; margin-top: -10px; }
                #menu3 a, #menu4 a, #menu5 a, #menu5 .act  { width: 200px; display: block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
#link_one {  }
	</style>
<script src="/js/menu_big.js"></script>
</head>
<body>
<div class="menu" id="menu1">
	<a href="/razdel_01/">razdel_01</a>
	<a href="/razdel_02/">razdel_02</a>
	<a href="/razdel_03/">razdel_03</a>
	<a href="/razdel_04/">razdel_04</a>
	<a href="/razdel_05/">razdel_05</a>
	<a href="/razdel_06/">razdel_06</a>
	<a href="/razdel_07/">razdel_07</a>
	<a href="/razdel_08/">razdel_08</a>
	<a href="/razdel_09/">razdel_09</a>
	<a href="/razdel_10/">razdel_10</a>
	</div>
	<div class="menu" id="menu2">
		<a href="/razdel_01/podrazdel_01/">podrazdel_01</a>
		<a href="/razdel_01/podrazdel_02/">podrazdel_02</a>
		<a href="/razdel_01/podrazdel_03/">podrazdel_03</a>
		<a href="/razdel_01/podrazdel_04/">podrazdel_04</a>
		<a href="/razdel_01/podrazdel_05/">podrazdel_05</a>
		<a href="/razdel_01/podrazdel_06/">podrazdel_06</a>
		<a href="/razdel_01/podrazdel_07/">podrazdel_07</a>
		<a href="/razdel_01/podrazdel_08/">podrazdel_08</a>
		<a href="/razdel_01/podrazdel_09/">podrazdel_09</a>
		<a href="/razdel_01/podrazdel_10/">podrazdel_10</a>
		<a href="/razdel_01/podrazdel_11/">podrazdel_11</a>
		<a href="/razdel_01/podrazdel_12/">podrazdel_12</a>
		<a href="/razdel_01/podrazdel_13/">podrazdel_13</a>
		<a href="/razdel_01/podrazdel_14/">podrazdel_14</a>
		<a href="/razdel_01/podrazdel_15/">podrazdel_15</a>
			</div>
		<div id="menu_right">
		<div class="menu" id="menu3">
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_01/">podpodrazdel_01</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_02/">podpodrazdel_02</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_03/">podpodrazdel_03</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_04/">podpodrazdel_04</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_05/">podpodrazdel_05</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_06/">podpodrazdel_06</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_07/">podpodrazdel_07</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_08/">podpodrazdel_08</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_09/">podpodrazdel_09</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_10/">podpodrazdel_10</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_11/">podpodrazdel_11</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_12/">podpodrazdel_12</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_13/">podpodrazdel_13</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_14/">podpodrazdel_14</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_15/">podpodrazdel_15</a>
			</div>
			<div class="menu" id="menu4">
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/">podrazdel-a</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-b/">podrazdel-b</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-c/">podrazdel-c</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-d/">podrazdel-d</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-e/">podrazdel-e</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-f/">podrazdel-f</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-g/">podrazdel-g</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-h/">podrazdel-h</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-i/">podrazdel-i</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-j/">podrazdel-j</a>
			</div>
			<div class="menu" id="menu5">
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/01.html" id="link_one">page-01</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/02.html">page-02</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/03.html">page-03</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/04.html">page-04</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/05.html">page-05</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/06.html">page-06</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/07.html">page-07</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/08.html">page-08</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/09.html">page-09</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/10.html">page-10</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/11.html">page-11</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/12.html">page-12</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/13.html">page-13</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/14.html">page-14 </a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/15.html">page-15</a>
</div>
</div>
</body>
</html>

Malleys · #**163** (**permalink**) 07.04.2019, 14:55

Вот пример... http://malleys.lark.ru/menu1.html

Код смотрите тут... http://malleys.lark.ru/menu1.txt

Блондинка · #**164** (**permalink**) 07.04.2019, 21:39

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

Malleys · #**165** (**permalink**) 07.04.2019, 21:44

Сообщение от Блондинка

выровнять(поднять) по вертикали текст ссылок

Так я же в примере вам это исправил...

Блондинка · #**166** (**permalink**) 07.04.2019, 21:49

#menu2 a {
width: 170px;
height: 29px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 0 2px;
padding: 5px;
box-sizing: border-box; 
background-color: #f0f0f0;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="170" height="29" \
fill="none" stroke="#999" stroke-width="1px"> \
<path d="M 1 1 L 169 1 L 169 19 L 82.5 29 L 1 19 z"></path> \
</svg>'
);
background-repeat: no-repeat; 
}

сейчас так, но наверное надо

#menu2 a {
width: 170px;
height: 29px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 0 2px;
padding: 5px;
box-sizing: border-box; 
background-color: #f0f0f0;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="170" height="29" \
fill="none" stroke="#999" stroke-width="1px"> \
<path d="M 0 0 L 170 0 L 170 19 L 82.5 29 L 0 19 z"></path> \
</svg>'
);
background-repeat: no-repeat; 
}

Блондинка · #**167** (**permalink**) 07.04.2019, 22:05

Malleys,
вот часть твоего кода

#menu1 a {
			width: 150px;
			height: 40px;
			text-align: center;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 2px;
			padding: 5px;
			box-sizing: border-box;
			color: deeppink;
			background-image: url('data:image/svg+xml,\
				<svg xmlns="http://www.w3.org/2000/svg" \
					width="300" height="130" \
					fill="none" stroke="deeppink" stroke-width="2.5"> \
				<path d="M 5 5 L 145 5 L 145 30 L 72.5 35 L 5 30 z"></path> \
				</svg>'
			);
			background-repeat: no-repeat;
		}

Блондинка · #**168** (**permalink**) 08.04.2019, 02:09

окончательно использовала этот кусок кода

#menu2 { height: 39px; overflow-x: scroll; white-space: nowrap; border: 1px solid transparent; padding: 0 5px 0 5px; }
#menu1 a { width: 23%; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
#menu2 a {
width: 170px;
height: 40px;
text-align: center; 
vertical-align: 5px; 
border-radius: 8px 8px 0 0 /5px 5px 0 0; 
border-top: 1px solid #999;
display: inline-flex;
justify-content: center;
align-items: center;
margin-top: -1px;
padding: 5px auto 15px;
box-sizing: border-box; 
background-color: #f0f0f0;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="170" height="39" \
fill="none" stroke="#999" stroke-width="1px"> \
<path d="M 0 0 L 170 0 L 170 29 L 85.5 38 L 0 29 z	"></path> \
</svg>'
);
background-repeat: no-repeat; 
}

на этой странице

Блондинка · #**169** (**permalink**) 08.04.2019, 02:19

Сообщение от Malleys

Так я же в примере вам это исправил...

а можно на словах объяснить где я накосячила с вертикальным выравниванием и заливкой фона?

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

Блондинка · #**170** (**permalink**) 10.04.2019, 12:56

Никто не знает почему фон не обрезается?

Форум

Справочник

Discord чат

Курсы javascript