Меню навигационной панели в css3

Question

Меню навигационной панели в css3

0

Это то, что я хочу сделать:

образец кода:

  #mainnav-menu {
            float: left;
            width: 101%;
            list-style-type: none;
            list-style-position: outside;
            position: relative;
            background-color: #389c0c;
            -webkit-box-shadow: 0 10px 8px -6px black;
               -moz-box-shadow: 0 10px 8px -6px black;
                    box-shadow: 0 10px 8px -6px black;
        }
        #mainnav-menu li {
            float:left;
            position:relative;
            margin-right: 1px;
        }
        #mainnav-menu a {
            display: block;
            padding: 0.8em 1.2em;
            text-decoration: none;
            font-size: 1.1em;
            font-family: 'Carme', Tahoma, Verdana, Arial;
            color: #bde8a9;
            -webkit-transition: all 0.1s ease-out;
            -moz-transition: all 0.1s ease-out;
            -ms-transition: all 0.1s ease-out;
            -o-transition: all 0.1s ease-out;
            transition: all 0.1s ease-out;  
        }
        #mainnav-menu a:link, #mainnav-menu a:visited{
            color: #bde8a9;
            text-decoration: none;
        }
        #mainnav-menu a:hover {
            color: #64c937;
            background: #0088ff; 
        }
        #mainnav-menu ul {
            position: absolute;
            display: none;
            z-index: 99;
            background: #0088ff;
        }
        #mainnav-menu ul li{
            margin: 0;
        }
        #mainnav-menu ul a {
            width: 250px;
            width: 16rem;
            padding: 0.7em 1.3em;
            float: left;
            font-weight: normal;
            color: #fff;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #mainnav-menu ul a:link, #mainnav-menu ul a:visited{
            color: #fff;
            font-size: 1.0em;
            text-decoration: none;
        }

        #mainnav-menu li ul ul {
            margin-left: 250px;
            margin-left: 16rem;
        }

        #wrapper {
            max-width: 1000px;
            width: 92%;
            margin: 0 auto 5em;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background: #00F;
            -moz-box-shadow: 0 0 10px #888;
            -webkit-box-shadow: 0 0 10px#888;
            box-shadow: 0 0 10px #888; 
        }

HTML:

    <header id="header" class="container clearfix" role="banner">

    <div id="logo">

    </div>
</header>

<h3 id="mainnav-icon">Menu</h3><nav id="mainnav" class="container clearfix" role="navigation">
    <ul id="mainnav-menu" class="menu"><li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-62"><a href="#">Home</a></li>
            <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="#">About</a></li>
            <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="#">Contact</a></li>

        </ul>   </nav>


     </div>

jsfiddle: здесь

Моя проблема заключается в том, что я не могу заставить левую часть навигационной панели расширяться. Есть идеи? Я с радостью благодарю. Благодарю.

ЗАМЕТКА:

Я не хочу использовать какой-либо дополнительный образ, я просто хочу сделать это в чистом css.

Dunkey 01 окт. 2013, в 11:32

Источник

0

Что вы подразумеваете под «расширением»? Не могли бы вы уточнить, пожалуйста?
miguelarcilla 01 окт. 2013, в 09:16
0

Я имею в виду, что обе стороны должны быть вытянутыми и равными обертке.
Dunkey 01 окт. 2013, в 09:18
0

что вы хотите продлить? меню или заголовок?
Mr_Green 01 окт. 2013, в 09:22
0

@Mr_Green Я имею в виду меню / панель навигации
Dunkey 01 окт. 2013, в 09:24

Показать ещё 2 комментария

Теги:

html

css

4 ответа

1

Мне кажется, что вы хотите создать ленту css3. Вы можете использовать это руководство: http://www.andreapinchi.it/css3-ribbon/

gray 01 окт. 2013, в 06:27

0

Вы имеете в виду что-то вроде этого? (примените его к своей скрипке):

#mainnav-menu {
    list-style-type: none;
    background-color: #389c0c;
    -webkit-box-shadow: 0 10px 8px -6px black;
    -moz-box-shadow: 0 10px 8px -6px black;
    box-shadow: 0 10px 8px -6px black;
}
#mainnav-menu li {
    display: inline;
    margin-right: 1px;
}
#mainnav-menu a {
    padding: 0 1.2em;
    text-decoration: none;
    font-size: 1.1em;
    font-family:'Carme', Tahoma, Verdana, Arial;
    color: #bde8a9;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
#mainnav-menu a:link, #mainnav-menu a:visited {
    color: #bde8a9;
    text-decoration: none;
}
#mainnav-menu a:hover {
    color: #64c937;
    background: #0088ff;
}
#mainnav-menu ul {
    position: absolute;
    display: none;
    z-index: 99;
    background: #0088ff;
}
#mainnav-menu ul a {
    width: 250px;
    width: 16rem;
    padding: 0.7em 1.3em;
    float: left;
    font-weight: normal;
    color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#mainnav-menu ul a:link, #mainnav-menu ul a:visited {
    color: #fff;
    font-size: 1.0em;
    text-decoration: none;
}
#wrapper {
    width: 92%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #00F;
    -moz-box-shadow: 0 0 10px #888;
    -webkit-box-shadow: 0 0 10px#888;
    box-shadow: 0 0 10px #888;
}

miguelarcilla 01 окт. 2013, в 07:36

0

Спасибо за ответ, но, как вы можете видеть на скриншоте, который я разместил, он сильно отличается. Внимательно посмотрите на скриншот, вы можете заметить углы навигатора
Dunkey 01 окт. 2013, в 09:26
1

@Dunkey Извините, скриншот не загрузился для меня. Я думаю, я не был уверен, что ты собираешься. Проверьте ответ Грея, это может быть то, что вам нужно
miguelarcilla 01 окт. 2013, в 09:27

-2

Ответ здесь

http://jsfiddle.net/whws8/5/

если вы хотите создать образ. Вам нужно использовать CSS, как это

#clip
{
position: absolute;
top: 23px;
left:-5px;
display: inline-block;
border-bottom: 7px solid rgba(0, 0, 0, 0);
border-right: 12px solid #1F1FC1;
border-left: 7px solid rgba(0, 0, 0, 0);
content: '';}

Dinesh Kanivu 01 окт. 2013, в 07:53

0

@ Данки, пожалуйста, проверьте этот ответ, и если этот ответ поможет вам, пожалуйста, дайте мне знать
Dinesh Kanivu 01 окт. 2013, в 09:49

Ещё вопросы

Что вы подразумеваете под «расширением»? Не могли бы вы уточнить, пожалуйста?
Я имею в виду, что обе стороны должны быть вытянутыми и равными обертке.
что вы хотите продлить? меню или заголовок?
@Mr_Green Я имею в виду меню / панель навигации
Спасибо за ответ, но, как вы можете видеть на скриншоте, который я разместил, он сильно отличается. Внимательно посмотрите на скриншот, вы можете заметить углы навигатора
@Dunkey Извините, скриншот не загрузился для меня. Я думаю, я не был уверен, что ты собираешься. Проверьте ответ Грея, это может быть то, что вам нужно
@ Данки, пожалуйста, проверьте этот ответ, и если этот ответ поможет вам, пожалуйста, дайте мне знать

Mr_Green · Accepted Answer · 2013-10-01T08-37-00.000Z

Вы можете сделать это, используя :after и :before селекторами псевдоэлементов.

CSS

#mainnav{
    overflow: hidden;
    position: relative;
}
#mainnav:before{
    content: "";
    position: absolute;
    right: -25px;
    bottom: -3px;
    width: 0px;
    height: 0px;
    border-color: transparent transparent transparent green;
    border-style: solid;
    border-width: 20px;    
}
#mainnav:after{
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    left: -20px;
    bottom: -4px;
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 20px;
    z-index: 1;
}

Рабочий скрипт