ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка css: выезжающее левое меню
12 сообщений из 12, страница 1 из 1
верстка css: выезжающее левое меню
    #38723178
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Нужна помощь:
нужно реализовать выезжающее левое меню

Код: 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
| Ответить | Цитировать | Написать  
верстка css: выезжающее левое меню
    #38723179
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
sp,
...
Рейтинг: 0 / 0
19.08.2014, 10:35
| Ответить | Цитировать | Написать  
верстка css: выезжающее левое меню
    #38723181
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Картинка того что должно быть
...
Рейтинг: 0 / 0
19.08.2014, 10:36
| Ответить | Цитировать | Написать  
верстка css: выезжающее левое меню
    #38723209
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
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:02
| Ответить | Цитировать | Написать  
верстка css: выезжающее левое меню
    #38723219
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

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

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

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

спасибо!
...
Рейтинг: 0 / 0
19.08.2014, 13:33
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка css: выезжающее левое меню
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38723391&tid=1446788]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 62ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 45ms
get tp. blocked users:
 1ms
others: 203ms
total:  350ms
созд. / загр.: 350ms
x
x
Закрыть


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