Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка css: выезжающее левое меню / 12 сообщений из 12, страница 1 из 1
19.08.2014, 10:35
    #38723178
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
Нужна помощь:
нужно реализовать выезжающее левое меню

Код: html
1.
2.
3.
4.
<div class="body-wrapper">
  <div class="left-menu"></div>
  <div class="content"></div>
</div>



Код: css
1.
2.
3.
4.
html, body,
.body-wrapper{
 height: 100%;
}



с меню понятно:
Код: css
1.
2.
3.
4.
5.
6.
7.
.left-menu {
	position: relative;
	left: -240px;
	width: 240px;
	height: 100%;
	top: 0;
}



а вот с .content не пойму - съезжает вниз
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 10:35
    #38723179
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
sp,
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 10:36
    #38723181
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
Картинка того что должно быть
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 11:02
    #38723209
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
spс меню понятно:
Код: css
1.
2.
3.
4.
5.
6.
7.
.left-menu {
	position: relative;
	left: -240px;
	width: 240px;
	height: 100%;
	top: 0;
}


Фигня полная... Потому и ломает контент.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 11:07
    #38723219
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
krvsa,

согласен что фигня - поэтому и прошу помощи
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 11:13
    #38723225
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
sp , как вариант...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html, 
body {
	height: 100%;
}
.body-wrapper {
	position: relative;
	height: 100%;
}
.left-menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 100%;
	background-color: red;
}
.left-menu:hover {
	width: 150px;
}
.content {
	height: 100%;
	background-color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="body-wrapper">
	<div class="left-menu"></div>
	<div class="content">content</div>
</div>
</body>
</html>


Меню вылезет по наведению мыши...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 11:57
    #38723283
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
krvsa,

спасибо, как всегда оперативно - за что ценю и уважаю!)
а что надо изменить чтоб меню сдвигало контент а не было сверху?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 12:15
    #38723322
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
krvsa,

подскажите пожалуйста есть ли какие-либо костыли для IE7 для поддержки display: [table, table-row,.....] или только сами таблицы?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 12:49
    #38723391
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
spподскажите пожалуйста есть ли какие-либо костыли для IE7 для поддержки display: [table, table-row,.....] или только сами таблицы?
Таблица форева!
Остальное все муляж...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 12:52
    #38723394
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
spа что надо изменить чтоб меню сдвигало контент а не было сверху?
Аааа вона как тебе надо...
Тогда либо табличкой... Либо скрип писать надо, поскольку нужно менять "расположение" сразу двух элементов...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 12:55
    #38723399
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
spа что надо изменить чтоб меню сдвигало контент а не было сверху?
Вот вариант с табличкой...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html, 
body {
	height: 100%;
}
.body-wrapper {
	width: 100%;
	height: 100%;
}
.left-menu {
	width: 10px;
	background-color: red;
}
.left-menu:hover {
	width: 150px;
}
.content {
	background-color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table class="body-wrapper">
	<td class="left-menu"></td>
	<td class="content">content</td>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.08.2014, 13:33
    #38723441
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка css: выезжающее левое меню
krvsa,

спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка css: выезжающее левое меню / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 507ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446788]:
 0ms
get settings:
 7ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 153ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 2ms
others: 247ms
total:  507ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]