Реализация меню с эффектами на CSS

@Герман · Регистрация: 12.05.2012

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

Помогите пожалуйста с меню, ато у меня туго с этим... текстуры вот сделал вроде, а как реализовать непойму...

вид должен быть как на финал, то есть подложка под низом, сверху
"верх", когда активный блок меню или наводится мышка, верх стает прозрачным в
том месте, чтоб проявлялась только подложка, и желательно чтобы цвет менялся еще
как на картинке, ну хотя это я уже сам сделаю..)

@Герман · 06.02.2013, 12:57 **[ТС]**

HTML5
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
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>menu</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
 
    $("ul.subnav").parent().append("<span></span>"); 
    
    $("ul.topnav li span").click(function() {
        
        $(this).parent().find("ul.subnav").slideDown('fast').show(); 
 
        $(this).parent().hover(function() {
        }, function(){  
            $(this).parent().find("ul.subnav").slideUp('slow'); 
        });
 
        }).hover(function() { 
            $(this).addClass("subhover"); 
            
            $(this).removeClass("subhover"); 
    });
 
});
</script> 
<link href="style.css" rel="stylesheet" type="text/css" />
 
 
</head> 
 
<body> 
<div class="container"> 
   
        <ul class="topnav"> 
            <li><a href="#">Главная</a></li> 
            <li><a href="#">О нас</a></li> 
            <li><a href="#">Adnsand</a></li> 
            <li><a href="#">DASBjd</a></li> 
            <li><a href="#">sdjasbd sjb</a></li> 
                 <li> 
                <a href="#">FOTO</a> 
                <ul class="subnav"> 
                    <li><a href="#">FOTO KCP</a></li> 
                    <li><a href="#">FOTO Putzmeister</a></li> 
                    <li><a href="#">FOTO Zoomlion</a></li> 
                </ul> 
               </li> 
        </ul> 
    </div> 
</div> 
 
 
</body> 
</html>

CSS
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
.container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
 
#header .disclaimer {
    color: #999;
    padding: 100px 0 7px 0;
    text-align: right;
    display: block;
    position: absolute;
    top: 0; right: 0;
}
 
ul.topnav {
    list-style: none;
    padding: 0 20px;    
    margin: 0;
    float: left;
    width: 920px;
    height: 71px;
    background: #222;
    font-size: 1.2em;
    background: url(images/topnav_bg.png) no-repeat;
}
ul.topnav li {
    float: left;
    margin: 0;  
    padding: 0 10px 0 0;
    position: relative; 
}
ul.topnav li a{
    padding: 15px 10px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.topnav li a:hover{
    background: url(images/topnav_hover.png) no-repeat center top;
}
ul.topnav li span { 
    width: 18px;
    height: 53px;
    float: left;
    background: url(images/subnav_btn.png) no-repeat center ;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} 
ul.topnav li ul.subnav {
    list-style: none;
    position: absolute; 
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; 
    border-bottom: 1px solid #444; 
    clear: both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: left;
    width: 145px;
    background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { 
    background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center; 
}
#header img {
    margin: 20px 0 10px;
}

нашел урок, начал по нем, делать, но такой бред получается...

в общем куплю менюшку что в 1м сообщении, предлы ПМ, я думаю кто шарит, тут нечего делать
или что то наподобии http://www.weblancer.net/users... .html#item ну там походу на флеш, мне не нада такая крутизна)

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

@and_y87 · 06.02.2013, 14:58

Щас будет

Добавлено через 16 минут
Что при наведении происходит?

серый фон убирается или наоборот появляется?
или это какието определённые кнопки с серым фоном... ?

@and_y87 · 06.02.2013, 15:32

Сделал такую вот...
может понравиться...
http://example.andy87.ru/15/index.html

@Taatshi · 07.02.2013, 21:37

Есть дубль во фрилансе. Закрыто.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	06.02.2013, 14:58
	Щас будет Добавлено через 16 минут Что при наведении происходит? серый фон убирается или наоборот появляется? или это какието определённые кнопки с серым фоном... ? 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	07.02.2013, 21:37
	Есть дубль во фрилансе. Закрыто. 0