«Мега» Меню HTML CSS

-4

Я хотел бы представить себе меню HTML, чтобы применить на сайте Sharepoint«Мега» Меню HTML CSS

Это немного сложно объяснить так есть схема Picture of the Menu wanted

У вас есть пример css для достижения этого? Структура HTML такова:

ID MENU \t \t \t \t  #zz12_TopNavigationMenu 
 
    UL (level 1) \t \t \t #zz13_RootAspMenu 
 
\t LI \t \t \t \t .static 
 
\t \t A 
 
\t \t SPAN 
 
\t \t \t SPAN \t \t .menu-item-text 
 
\t LI \t \t \t \t .static.dynamic-children 
 
\t \t A 
 
\t \t SPAN 
 
\t \t \t SPAN \t \t .menu-item-text 
 
\t \t \t UL \t (Level 2) \t \t \t .dynamic 
 
\t \t \t LI \t \t \t \t \t .dynamic dynamic-children 
 
\t \t \t \t A 
 
\t \t \t \t SPAN 
 
\t \t \t \t \t SPAN \t \t \t .menu-item-text 
 
\t \t \t \t \t UL (Level 3) \t .dynamic 
 
\t \t \t \t \t \t LI \t \t \t .dynamic 
 
\t \t \t \t \t \t A 
 
\t \t \t \t \t \t SPAN 
 
\t \t \t \t \t \t \t SPAN \t .menu-item-text 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t A 
 
\t \t \t \t \t \t  SPAN 
 
\t \t \t \t \t \t \t SPAN 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t LI - 
 
\t \t \t \t \t UL (Level 3) 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t 
 
\t \t \t \t LI - Practical information 
 
\t \t \t \t \t UL (Level 3) 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI 
 
\t \t \t \t \t \t LI

Спасибо

источник

2016-02-17 Mathieu Debouvries

Пожалуйста, отформатируйте свой код –

Просьба поделиться тем, что вы пробовали до сих пор –

Ожидается, что вы хотя бы попытаетесь это сделать сами. Stack Overflow не является службой записи кода. Я бы предположил, что вы проводите дополнительные исследования, либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали, и почему это не сработало. –

-1

попробуйте этот код

<div class="tabs"> 

    <div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab One</label> 

     <div class="content"> 
      stuff 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Tab Two</label> 

     <div class="content">`enter code here` 
      stuff 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab Three</label> 

     <div class="content"> 
      stuff 
     </div> 
    </div> 

</div>

Css

.tabs { 
    position: relative; 
    min-height: 200px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute;`enter code here` 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    z-index: 1; 
}

источник

2016-02-17 13:12:32 karam

Добро пожаловать в Stack Overflow! Хотя это теоретически может ответить на вопрос, объясните, как это решает вопрос OP и как. –

«Мега» Меню HTML CSS

ответ

Смежные вопросы