Фото от INVIVO
Кастом байки
Лучший дизайн сайтов
Carlos H. Reinesch
Меню Jimdo web 1.0
Брошюры [подборка]
Авто тематика
Навигации
10.0 Оценка
Шаблон Fashion
Цветные текстуры
Обои Девушки
Шрифты
Природа и животные
Слайдеры jQuery
Аниме и рисунки

  • Навигация под Jimdo.

    Это мой первый опыт по адаптации сторонних элементов для пользователей Jimdo. В дальнейшем я постараюсь выложить в свободное пользование еще пару элементов. Многие веб-дизайнеры не одобряют, когда выкладывают вещи подобные этой, мотивируя это тем, что раскрываются "сикреты", отбирается "хлеб", то, чем они зарабатывают. Но как по мне, все идет к тому, что скоро как таковые создатели сайтов, их разработчики исчезнут и каждый сможет сам делать сайты. Остануться только веб-художники, так как рисовать не каждому дано.

     

    Если меню окажется в верхнем левом углу монитора, то перед кодом в HTML поставьте тег <br />. Это отступ вниз, тем самым вы укажите, что это новый элемент, который должен быть не продолжением предыдущего блока, а новым.

    Исходники

    Jimdo navigation 1.1.rar
    Заархивированные данные 1.6 KB

    код HTML

        <div id='cssmenu'>

            <ul>

                <li class='active'>

                    <a href='index.html'><span>Home</span></a>

                </li>


                <li class='has-sub'>

                    <a href='#'><span>Информация</span></a>

                    <ul>

                        <li class='has-sub'>

                            <a href='#'><span>Раздел 1</span></a>

                            <ul>

                                <li>

                                    <a href='#'><span>Страница 1</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 2</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 3</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 4</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 5</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 6</span></a>

                                </li>

                            </ul>

                        </li>


                        <li class='has-sub'>

                            <a href='#'><span>Раздел 2</span></a>

                            <ul>

                                <li>

                                    <a href='#'><span>Страница 1</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 2</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 3</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 4</span></a>

                                </li>

                            </ul>

                        </li>


                        <li class='has-sub'>

                            <a href='#'><span>Раздел 3</span></a>

                            <ul>

                                <li>

                                    <a href='#'><span>Страница 1</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 2</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 3</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 4</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 5</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 6</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 7</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 8</span></a>

                                </li>

                            </ul>

                        </li>


                        <li class='has-sub'>

                            <a href='#'><span>Раздел 4</span></a>

                            <ul>

                                <li>

                                    <a href='#'><span>Страница 1</span></a>

                                </li>
                                <li>

                                    <a href='#'><span>Страница 2</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 3</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 4</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 5</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 6</span></a>

                                </li>

                            </ul>

                        </li>


                        <li class='has-sub'>

                            <a href='#'><span>Раздел 5</span></a>

                            <ul>

                                <li>

                                    <a href='#'><span>Страница 1</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 2</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 3</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 4</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 5</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 6</span></a>

                                </li>

                            </ul>

                        </li>


                        <li class='has-sub'>

                            <a href='#'><span>Раздел 6</span></a>

                            <ul>

                                <li>

                                    <a href='#'><span>Страница 1</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 2</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 3</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 4</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 5</span></a>

                                </li>


                                <li>

                                   <a href='#'><span>Страница 6</span></a>

                                </li>

                            </ul>

                        </li>


                        <li class='has-sub'>

                            <a href='#'><span>Раздел 7</span></a>

                            <ul>

                                <li>

                                    <a href='#'><span>Страница 1</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 2</span></a>

                                </li>

     

                                <li>

                                    <a href='#'><span>Страница 3</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 4</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 5</span></a>

                                </li>


                                <li>

                                    <a href='#'><span>Страница 6</span></a>

                                </li>

                            </ul>

                        </li>

                    </ul>

                </li>


                <li>

                    <a href='#'><span>Портфолио</span></a>

                </li>


                <li>

                    <a href='#'><span>Новости</span></a>

                </li>


                <li>

                    <a href='#'><span>Блог</span></a>

                </li>


                <li>

                    <a href='#'><span>Друзья</span></a>

                </li>


                <li>

                    <a href='#'><span>Контакты</span></a>

                </li>

            </ul>

        </div>

     

    код CSS

    /*==================== MENU v1.1 ====================*/


    #cssmenu ul { margin: 0; padding: 0;}

    #cssmenu li { margin: 0; padding: 0;}

    #cssmenu a { margin: 0; padding: 0;}

    #cssmenu ul {list-style: none;}

    #cssmenu a {text-decoration: none;}

    #cssmenu {height: 40px; background-color: #353535;}

    #cssmenu > ul > li {   

    float: left;   

    margin-left: 15px;   

    position: relative;

    }

     

    #cssmenu > ul > li > a {   

    color: rgb(160,160,160);   

    font-family: Verdana, 'Lucida Grande';   

    font-size: 12px;   

    line-height: 40px;   

    padding: 15px 20px;

    -webkit-transition: color .15s;   

    -moz-transition: color .15s;     

    -o-transition: color .15s;       

    transition: color .15s;

    }

     

    #cssmenu > ul > li > a:hover {color: rgb(250,250,250); }

    #cssmenu > ul > li > ul {   

    opacity: 0;   

    visibility: hidden;   

    padding: 16px 0 20px 0;   

    background-color: rgb(250,250,250);   

    text-align: left;   

    position: absolute;   

    top: 25px;   

    left: 50%;   

    margin-left: -90px;   

    width: 196px;

    -webkit-transition: all .3s .1s;   

    -moz-transition: all .3s .1s;     

    -o-transition: all .3s .1s;       

    transition: all .3s .1s;

    -webkit-border-radius: 5px;   

    -moz-border-radius: 5px;       

    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.4);   

    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,.4);       

    box-shadow: 0px 0px 0px rgba(0,0,0,.4);}

     

    #cssmenu > ul > li:hover > ul {   

    opacity: 1;   

    top: 35px;   

    visibility: visible;

    }

     

    #cssmenu > ul > li > ul:before{   

    content: '';   

    display: block;   

    border-color: transparent transparent rgb(250,250,250) transparent;   

    border-style: solid;   

    border-width: 10px;   

    position: absolute;   

    top: -20px;   

    left: 50%;   

    margin-left: -10px;}

     

    #cssmenu > ul ul > li { position: relative;}

     

    #cssmenu ul ul a{   

    color: rgb(50,50,50);   

    font-family: Verdana, 'Lucida Grande';   

    font-size: 13px;   

    background-color: rgb(250,250,250);   

    padding: 5px 8px 7px 16px;   

    display: block;

    -webkit-transition: background-color .1s;   

    -moz-transition: background-color .1s;     

    -o-transition: background-color .1s;       

    transition: background-color .1s;

    }

     

    #cssmenu ul ul a:hover {background-color: #ff0000;}

     

    #cssmenu ul ul ul {   

    visibility: hidden;   

    opacity: 0;   

    position: absolute;   

    top: -16px;   

    left: 206px;   

    padding: 16px 0 20px 0;   

    background-color: rgb(250,250,250);   

    text-align: left;   

    width: 206px;

    -webkit-transition: all .3s;   

    -moz-transition: all .3s;     

    -o-transition: all .3s;       

    transition: all .3s;

    -webkit-border-radius: 5px;   

    -moz-border-radius: 5px;       

    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.4);   

    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,.4);       

    box-shadow: 0px 0px 0px rgba(0,0,0,.4);

    }

     

    #cssmenu ul ul > li:hover > ul {opacity: 1;left: 196px; visibility: visible;}

     

    #cssmenu ul ul a:hover{   

    background-color: #0F99D3;   

    color: rgb(240,240,240);

    }

  • Это надо знать. Шрифты. скрипты

    Здесь расскажу о том, как надо обращаться с ссылками и текстом на странице. Также, данная статья будет для вас хорошей шпаргалкой в будущем, при редактировании своего контента.

  • Продвижение в поисковиках. статьи

    В данной теме разберем как правильно раскрутить свой сайт. Какие шаги стоит сделать в самом начале, что бы твой сайт засветился в Яндекс и Google. А также расставим приоритеты, с чего начинать.

  • Креативный фон сайта.скрипты

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