Меню горизонтальное на css3 – Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery

alexxlab

Горизонтальное выпадающего меню на CSS3

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»en»>

<head>

    <link rel=»stylesheet» href=»/web-developer/css/css/style.css» type=»text/css» media=»all»>

    <title>Горизонтальное выпадающее меню на CSS3</title>

</head>

<body>

    <div>

        <ul>

            <li><a href=»#»>Главная</a></li>

            <li><a href=»#»>Обучение</a>

                <div>

                    <ul>

                        <li><a href=»#»>HTML / CSS</a></li>

                        <li><a href=»#»>JS / jQuery</a></li>

                        <li><a href=»#»>PHP</a></li>

                        <li><a href=»#»>MySQL</a></li>

                        <li><a href=»#»>XSLT</a></li>

                        <li><a href=»#»>Ajax</a></li>

                    </ul>

                </div>

            </li>

            <li><a href=»#»>Ресурсы</a>

                <div>

                    <ul>

                        <li><a href=»#»>PHP</a></li>

                        <li><a href=»#»>MySQL</a></li>

                        <li><a href=»#»>XSLT</a></li>

                        <li><a href=»#»>Ajax</a></li>

                    </ul>

                </div>

            </li>

            <li><a href=»#»>Страницы</a>

                <div>

                    <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>

                </div>

            </li>

            <li><a href=»#»>О нас</a></li>

            <li><a href=»#»>Каталог</a></li>

            <li><a href=»#»>Контакты</a></li>

            <li></li>

        </ul>

    </div>

</body>

</html>

vladmaxi.net

Стильное горизонтальное меню на CSS3

FavoriteLoadingДобавить в закладки123


Стильное горизонтальное меню, которое лично мне очень понравилось

Для начала посмотрите ДЕМО

Моё тестирование в редакторе: КЛИК

Установка:

1#: В самый низ вашего CSS вставьте:

#crumbs { text-align: center; } #crumbs ul { list-style: none; display: inline-table; } #crumbs ul li { display: inline; } #crumbs ul li a { display: block; float: left; height: 50px; background: #F3F5FA; text-align: center; padding: 30px 20px 0 60px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #8093A7; } #crumbs ul li a:after { content: «»; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #F3F5FA; position: absolute; right: -40px; top: 0; z-index: 1; } #crumbs ul li a:before { content: «»; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #fff; position: absolute; left: 0; top: 0; } #crumbs ul li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #crumbs ul li:first-child a:before { display: none; } #crumbs ul li:last-child a { padding-right: 40px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #crumbs ul li:last-child a:after { display: none; } #crumbs ul li a:hover { background: #357DFD; color: #fff; } #crumbs ul li a:hover:after { border-left-color: #357DFD; color: #fff; }

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

#crumbs {

text-align: center;

}

 

#crumbs ul {

list-style: none;

display: inline-table;

}

 

#crumbs ul li {

display: inline;

}

 

#crumbs ul li a {

display: block;

float: left;

height: 50px;

background: #F3F5FA;

text-align: center;

padding: 30px 20px 0 60px;

position: relative;

margin: 0 10px 0 0;

font-size: 20px;

text-decoration: none;

color: #8093A7;

}

 

#crumbs ul li a:after {

content: «»;

border-top: 40px solid transparent;

border-bottom: 40px solid transparent;

border-left: 40px solid #F3F5FA;

position: absolute;

right: -40px;

top: 0;

z-index: 1;

}

 

#crumbs ul li a:before {

content: «»;

border-top: 40px solid transparent;

border-bottom: 40px solid transparent;

border-left: 40px solid #fff;

position: absolute;

left: 0;

top: 0;

}

 

#crumbs ul li:first-child a {

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

}

 

#crumbs ul li:first-child a:before {

display: none;

}

 

#crumbs ul li:last-child a {

padding-right: 40px;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

}

 

#crumbs ul li:last-child a:after {

display: none;

}

 

#crumbs ul li a:hover {

background: #357DFD;

color: #fff;

}

 

#crumbs ul li a:hover:after {

border-left-color: #357DFD;

color: #fff;

}

 

2#: HTML код меню:

<div> <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> </ul> </div>

<div>

<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>

</ul>

</div>

imapo.ru

Как из вертикального меню сделать горизонтальное? — Хабр Q&A

привет всем!
взгляните на мой код. как из этого вертикального меню сделать горизонтальное?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div>
     <ul>
         <li><a href="#">punkt1</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt2</a></li>
         <li><a href="#">punkt3</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt4</a></li>
         <li><a href="#">punkt5</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
     </ul>
  </div>
    
</body>
</html>
<code lang="css">
body{
    margin: 0;
    padding: 0;
    font: 1em/1.4em sans-serif;
}


.side{
    width: 200px;
    margin: 30px;
}

a{text-decoration: none;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }


/*внешний вид меню*/

.menu a{
    background: #3d3d3d;
    color: #fff;
    padding: 10px;
    display: block;
    width: 200px;
    border-bottom: 1px solid #7d7d7d;
    transition: 0.4s all;
    
}

.menu a:hover{
    background: #FF009D;
    color: #fff ;
    padding: 10px 0 20px 20px;   
}

/*всплывающее меню*/

.menu_list{
    position: relative;
}

.menu_drop{
    position: absolute;
    width: 100%;
    left: 110%;
    opacity: 0;
    top: 0;
}

.menu_list:hover .menu_drop{
    opacity: 1;
}
</code>

qna.habr.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *