Верхнее меню, как у Google

@Romens · Регистрация: 06.11.2011

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

Как сделать такое же верхнее меню как у гугла, рамблера?

@IIIypuk · 19.11.2011, 22:06

Наверное никак, это особенность сайта.
Можешь поковырять UserJS.

@Vicont · 19.11.2011, 22:08

У Google и Rambler разное по внешнему виду верхнее меню.
Если интересен сам принцип построения меню, тогда подойдет следующее:

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
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
        <title>Пасека</title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            ul li{
                    float: left;
                    margin-right: 7px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul>
    </body>
</html>

@Romens · 19.11.2011, 22:09 **[ТС]**

Особеность сайта?
Даже рамблер смог это повторить. Просто я не очень разбираюсь в javascript

@Jallik Lich · 19.11.2011, 22:11

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

Просто я не очень разбираюсь в javascript

А тебе и не нужен JavaScript. Все делается с помощью HTML и CSS...

@Romens · 19.11.2011, 22:12 **[ТС]**

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

У Google и Rambler разное по внешнему виду верхнее меню.
Если интересен сам принцип построения меню, тогда подойдет следующее:

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
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
        <title>Пасека</title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            ul li{
                    float: left;
                    margin-right: 7px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul>
    </body>
</html>

сам принцип понятен, но как с помощью css сделать?

@Vicont · 19.11.2011, 22:14

Что конкретно сделать? Лично я не вижу ничего сложного в меню обоих сайтов...обычное меню, только добавлен пункт "ещё" при клике на который появляется подменю (это делается при помощи javascript элементарно)

@Romens · 19.11.2011, 22:15 **[ТС]**

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

Что конкретно сделать? Лично я не вижу ничего сложного в меню обоих сайтов...обычное меню, только добавлен пункт "ещё" при клике на который появляется подменю (это делается при помощи javascript элементарно)

саму чёрную часть! Как её сделать?

@Vicont · 19.11.2011, 22:20

Наверное, я что-то не понимаю, либо вопрос элементарный..
Берем, скажем, блок div и прописываем ему стиль:

HTML5
1
<div style='width: 100%; height: 25px; background: #000;'>содержимое меню</div>

Что такого в черной области?

@Romens · 19.11.2011, 22:23 **[ТС]**

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

Наверное, я что-то не понимаю, либо вопрос элементарный..
Берем, скажем, блок div и прописываем ему стиль:

HTML5
1
<div style='width: 100%; height: 25px; background: #000;'>содержимое меню</div>

Что такого в черной области?

Это такая задумка!

А как сделать всю страничку гугла?
Просто она разделена на части а я туплю над этим!

@Vicont · 19.11.2011, 22:26

Я не смотрел разметку Google, но ничего сложного в ней нет:
1) блок с верхним меню
2) блок с логотипом и строкой поиска
3) футер

@Romens · 19.11.2011, 22:28 **[ТС]**

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

Я не смотрел разметку Google, но ничего сложного в ней нет:
1) блок с верхним меню
2) блок с логотипом и строкой поиска
3) футер

С первым пунктом разобрались!

@tabber · 20.11.2011, 00:17

а в чем то сложность?
хорошенько поковыряв по след. сыллке будет тебе такое же
http://ruseller.com/lessons.php?rub=32&id=268

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Romens 4 / 4 / 0 Регистрация: 06.11.2011 Сообщений: 108

	Верхнее меню, как у Google 19.11.2011, 21:51. Показов 4738. Ответов 12 Метки нет (Все метки) Как сделать такое же верхнее меню как у гугла, рамблера? 0

@IIIypuk 10 / 10 / 1 Регистрация: 19.11.2011 Сообщений: 101
	19.11.2011, 22:06
	Наверное никак, это особенность сайта. Можешь поковырять UserJS. 0

@Romens 4 / 4 / 0 Регистрация: 06.11.2011 Сообщений: 108
	19.11.2011, 22:09 [ТС]
	Особеность сайта? Даже рамблер смог это повторить. Просто я не очень разбираюсь в javascript 0

@Vicont front-end developer 284 / 275 / 39 Регистрация: 31.08.2010 Сообщений: 577 Записей в блоге: 1
	19.11.2011, 22:14
	Что конкретно сделать? Лично я не вижу ничего сложного в меню обоих сайтов...обычное меню, только добавлен пункт "ещё" при клике на который появляется подменю (это делается при помощи javascript элементарно) 0

@Vicont front-end developer 284 / 275 / 39 Регистрация: 31.08.2010 Сообщений: 577 Записей в блоге: 1
	19.11.2011, 22:26
	Я не смотрел разметку Google, но ничего сложного в ней нет: 1) блок с верхним меню 2) блок с логотипом и строкой поиска 3) футер 0

@tabber 37 / 41 / 3 Регистрация: 10.10.2010 Сообщений: 364
	20.11.2011, 00:17
	а в чем то сложность? хорошенько поковыряв по след. сыллке будет тебе такое же http://ruseller.com/lessons.php?rub=32&id=268 0