|
Как сделать такой профиль
|
|
| Coffee | Дата: Понедельник, 2013-10-21, 21:35 | Сообщение # 1 |
 Рядовой
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline
| Здраствуйте, не могу сделать профиль на подобии такого. При наведении на аватар выскакивает это окошко с меню. Как это сделать? Можете ли помочь мне в этом и написать короткий html и css, а дальше я разберусь. Заранее благодарю.
Сообщение отредактировал Coffee - Понедельник, 2013-10-21, 21:37 |
| |
| |
| ReSLeaR- | Дата: Вторник, 2013-10-22, 18:02 | Сообщение # 2 |
|
Сержант
Группа: Администраторы
Сообщений: 137
Награды: 6
Репутация: 28
Статус: Offline
| absolute нужно?
|
| |
| |
| Coffee | Дата: Вторник, 2013-10-22, 18:18 | Сообщение # 3 |
|
Рядовой
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline
| ReSLeaR-, пускай будет, если нужно будет, то убери (если он в css)
Сообщение отредактировал Coffee - Вторник, 2013-10-22, 18:20 |
| |
| |
| ReSLeaR- | Дата: Вторник, 2013-10-22, 18:28 | Сообщение # 4 |
|
Сержант
Группа: Администраторы
Сообщений: 137
Награды: 6
Репутация: 28
Статус: Offline
| CSS:
Код #ava_mnu_hovered{position:absolute;display:none}
HTML:
Код <div> <div id="ava_mnu_hovered">Текст</div> <a href="javascript://" id="ava_mnu"><img src="http://s83.ucoz.net/a/16/2833.jpg" width="70"/></a> </div>
JS:
Код $(function(){
$.fn.avaAnimate = function(param){
return $(this).stop().animate({opacity: param, height: param},300);
}
$('#ava_mnu').hover(function(){
var thisElem = $(this);
$('#ava_mnu_hovered').css({top: thisElem.offset().top - thisElem.outerWidth(),left: thisElem.offset().left}).avaAnimate('show');
},function(){
$('#ava_mnu_hovered').avaAnimate('hide');
});
}); |
| |
| |
| Coffee | Дата: Вторник, 2013-10-22, 18:41 | Сообщение # 5 |
|
Рядовой
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline
| А как его поднять немного вверх?
|
| |
| |
| ReSLeaR- | Дата: Вторник, 2013-10-22, 19:15 | Сообщение # 6 |
|
Сержант
Группа: Администраторы
Сообщений: 137
Награды: 6
Репутация: 28
Статус: Offline
| Coffee, обнови:
JS:
Код $(function(){
var aHref = $('#ava_mnu'), hoverElem = $('#ava_mnu_hovered');
$.fn.avaAnimate = function(param){
return $(this).stop().animate({opacity: param, height: param},300);
}
hoverElem.css({top: aHref.offset().top - hoverElem.outerHeight(),left: aHref.offset().left})
aHref.hover(function(){
hoverElem.avaAnimate('show');
},function(){
hoverElem.avaAnimate('hide');
});
});
CSS:
Код #ava_mnu{ display:inline-block;}
#ava_mnu_hovered{position:absolute;display:none;padding:5px;} |
| |
| |
| Coffee | Дата: Вторник, 2013-10-22, 19:55 | Сообщение # 7 |
|
Рядовой
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline
| Цитата <div id="ava_mnu_hovered">Текст</div>
Не могу поднять эту область от аватара =(
Она приклеена
Текст
Аватар
Нуждаюсь в
Текст
Аватар
Благодарю за всю помощь
|
| |
| |
| ReSLeaR- | Дата: Вторник, 2013-10-22, 22:37 | Сообщение # 8 |
|
Сержант
Группа: Администраторы
Сообщений: 137
Награды: 6
Репутация: 28
Статус: Offline
| Coffee,
разобрался?
|
| |
| |
| Kelin | Дата: Четверг, 2013-10-31, 09:12 | Сообщение # 9 |
|
Рядовой
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline
| ReSLeaR-, я, конечно, все понимаю, но зачем здесь JS, когда можно обойтись и CSS?
|
| |
| |
| ReSLeaR- | Дата: Пятница, 2013-11-01, 01:39 | Сообщение # 10 |
|
Сержант
Группа: Администраторы
Сообщений: 137
Награды: 6
Репутация: 28
Статус: Offline
| Kelin, конечно можно...но мне на скорую проще было на JS)
|
| |
| |
| Coffee | Дата: Воскресенье, 2013-11-03, 02:16 | Сообщение # 11 |
|
Рядовой
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline
| А можно на CSS
|
| |
| |
| ReSLeaR- | Дата: Воскресенье, 2013-11-03, 03:24 | Сообщение # 12 |
|
Сержант
Группа: Администраторы
Сообщений: 137
Награды: 6
Репутация: 28
Статус: Offline
| Coffee,
Код <style> #menu_nav{display:inline-block;text-decoration:none;} #menu_nav:hover ~ .menu_hover{display:block !important;} .menu_hover{ background: rgba(0,0,0,.4); padding: 5px; color: #fff; display:none; position:absolute; float:left; top: -25px; } </style> <div style="position:relative"> <a href="" id="menu_nav"><img src="http://ucoznews.ucoz.net/jsbar.png" width="100"></a> <div class="menu_hover">МенюМЕНЮМЕНЮ</div> </div>
top: -25px; - указать размер контента
|
| |
| |
| Coffee | Дата: Воскресенье, 2013-11-03, 23:45 | Сообщение # 13 |
|
Рядовой
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline
| ReSLeaR-, Благодарю  Добавлено (2013-11-03, 23:45)
---------------------------------------------
ReSLeaR-, Проблемка. Когда хочу навести на меню, оно скрывается (
|
| |
| |
| ReSLeaR- | Дата: Воскресенье, 2013-11-03, 23:46 | Сообщение # 14 |
|
Сержант
Группа: Администраторы
Сообщений: 137
Награды: 6
Репутация: 28
Статус: Offline
| Coffee, ссылку можно?
|
| |
| |
| Coffee | Дата: Четверг, 2013-11-07, 12:12 | Сообщение # 15 |
|
Рядовой
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline
| ReSLeaR-, Короче, что-бы не выносить тебе мозги, могу ли я тебя добавить в скайпе, мне нужна помочь немножко, буду очень благодарен. И с этим тоже
|
| |
| |
