Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Include Page
main_menu
main_menu

HTML
<nav class="aui-navgroup aui-navgroup-horizontal"><style>

.submenu {
    <div class="aui-navgroup-inner">
        <div class="aui-navgroup-primary">margin-left: -14px; /* Отступ от левого края сайта */
    margin-right: auto;
       <ul class="aui-nav">
       margin-top: -105px; /* Отступ от верхнего края сайта */
    width: 450px; /* длина  <li><a href="#">Nav item</a></li>строки меню*/
    position: fixed;
           <li class="aui-nav-selected"><a href="#">Selected item</a></li>
   z-index: 999;
}

#nav2, #nav2 ul {
    list-style: none outside none;
    margin: 0;
 <li><a href="#">Pull Requests <span class="aui-badge">123</span></a></li>
 padding: 0;
}
#nav2 {
    background-color: white; /* Цвет полосы       <li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" class="aui-dropdown2-trigger">Dropdown <span class="aui-icon-dropdown"></span></a></li>меню - белый*/
    float: left;
    margin-left: 10px;
      <li><a href="#"><span class="aui-icon aui-icon-test16-dark"></span> Overview</a></li>margin-right: 1%;
    width: 100%; /* длина строки меню*/
    position: relative;
}

#nav2 >  <li><a href="#">Kitchen Sink</a></li>li {
    float: left;
       </ul>text-align: left;
    -moz-transition: all 300ms  </div><!ease-in- .aui-navgroup-primary -->out 0s;
    -ms-transition: all   <div class="aui-navgroup-secondary">300ms ease-in-out 0s;
    -o-transition: all 300ms      <ul class="aui-nav">
         ease-in-out 0s;
       <li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" class="aui-dropdown2-trigger"><span class="aui-icon aui-icon-small aui-iconfont-configure">Configure</span></a></li>-webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav2 li a  </ul>{
    display: block;
   </div><!-- .aui-navgroup-secondary --> text-decoration: none;
    </div><!-moz- .aui-navgroup-inner -->
</nav><!-- .aui-navgroup -->
HTML
<div class="aui-tabs horizontal-tabs" id="tabs-example">transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    <ul class="tabs-menu">
        <li class="menu-item active-tab">-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms  <a href="#tab-review"><strong>Обзор</strong></a>ease-in-out 0s;
    -webkit-transition: color 450ms  </li>
		<li class="menu-item">
   ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out  <a href="#tab-cost"><strong>Стоимость</strong></a>
        </li>0s, background-color 450ms ease-in-out 0s;
        <li class="menu-item">
            <a href="#tab-features"><strong>Функции</strong></a>
        </li>white-space: normal;
}
#nav2 > li > a {
        <li class="menu-item">color: #3b73af;
            <a href="#tab-demo"><strong>Демо</strong></a>display: block;
        </li>
		<li class="menu-item">
            <a href="#tab-clients"><strong>Клиенты</strong></a>
        </li>font-size: 1.0em; /* Размер шрифта главного меню */
        <li class="menu-item">
            <a href="#tab-documentation"><strong>Документация</strong></a>line-height: 39px;
    padding:    </li>0 10px;
    </ul>
    <div class="tabs-pane active-pane" id="tab-review">
        <h2>This is Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tab-cost">
        <h2>This is Tab 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tab-features">
        <h2>This is Tab 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tab-demo">
        <h2>This is Tab 4</h2>
        <p>Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.</p>
    </div>
	<div class="tabs-pane" id="tab-clients">
        <h2>This is Tab 4</h2>
        <p>Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.</p>
    </div>
	<div class="tabs-pane" id="tab-documentation">
        <h2>This is Tab 4</h2>
        <p>Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.</p>
    </div>
</div><!-- // .aui-tabs -->

...

* text-transform: uppercase; */
}
#nav2 > li:hover > a, #nav > a:hover {
    background-color: #3b73af; /* фон выделенного элемента подменю */
    color: #FFFFFF;
}
#nav2 li.active > a {
    background-color: #205081; /* Цвет блока меню при клике курсором мыши - голубой */
    color: #FFFFFF;
}

</style>
HTML
<div class="submenu">
	<ul id="nav2">
		<li><a href="http://www.teamlead.ru/pages/viewpage.action?pageId=5898307">Atlassian</a>
		<li><a href="http://www.teamlead.ru/pages/viewpage.action?pageId=130287186">Teamlead</a></li>
		<li><a href="http://www.teamlead.ru/pages/viewpage.action?pageId=130287103">Marketplace</a></li>
	</ul>
	</div>
</div>