]> source.dussan.org Git - jquery-ui.git/commitdiff
Updated menubar test to use UL elements rather than DIVs
authorHans Hillen <hans.hillen@gmail.com>
Fri, 15 Apr 2011 17:19:27 +0000 (19:19 +0200)
committerHans Hillen <hans.hillen@gmail.com>
Fri, 15 Apr 2011 17:19:27 +0000 (19:19 +0200)
tests/visual/menu/menubar.html

index 5847c623f1d81b6447cc2c49fe656a832c006710..c5b63ae86a19f3c3174ede6e5424a2070f4b3d48 100644 (file)
                .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
                .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
                
+               ol.ui-menubar, ul.ui-menubar {
+                       list-style: none;
+                       margin-left: 0;
+                       padding-left: 0;        
+               }
+               
+               li.ui-menubar-item {
+                       float: left;            
+               }
+               
                table {
                        border-collapse: collapse;
                }
 </head>
 <body>
 
-<div id="bar1" class="menubar">
-       <a href="#">File</a>
-       <ul>
-               <li><a href="#">Open...</a></li>
-               <li class="ui-state-disabled">Open recent...</li>
-               <li><a href="#">Save</a></li>
-               <li><a href="#">Save as...</a></li>
-               <li><a href="#">Close</a></li>
-               <li><a href="#">Quit</a></li>
-       </ul>
-       <a href="#">Edit</a>
-       <ul>
-               <li><a href="#">Copy</a></li>
-               <li><a href="#">Cut</a></li>
-               <li class="ui-state-disabled">Paste</li>
-       </ul>
-       <a href="#">View</a>
-       <ul>
-               <li><a href="#">Fullscreen</a></li>
-               <li><a href="#">Fit into view</a></li>
-               <li>
-                       <a href="#">Encoding</a>
-                       <ul>
-                               <li><a href="#">Auto-detect</a></li>
-                               <li><a href="#">UTF-8</a></li>
-                               <li>
-                                 <a href="#">UTF-16</a>
-                             <ul>
-                                <li><a href="#">Option 1</a></li>
-                                <li><a href="#">Option 2</a></li>
-                                <li><a href="#">Option 3</a></li>
-                                <li><a href="#">Option 4</a></li>
-                             </ul>
-                          </li>
-                       </ul>
-               </li>
-               <li><a href="#">Customize...</a></li>
-       </ul>
-</div>
+<ul id="bar1" class="menubar">
+       <li>
+               <a href="#">File</a>
+               <ul>
+                       <li><a href="#">Open...</a></li>
+                       <li class="ui-state-disabled">Open recent...</li>
+                       <li><a href="#">Save</a></li>
+                       <li><a href="#">Save as...</a></li>
+                       <li><a href="#">Close</a></li>
+                       <li><a href="#">Quit</a></li>
+               </ul>
+       </li>
+       <li>
+               <a href="#">Edit</a>
+               <ul>
+                       <li><a href="#">Copy</a></li>
+                       <li><a href="#">Cut</a></li>
+                       <li class="ui-state-disabled">Paste</li>
+               </ul>
+       </li>
+       <li>
+               <a href="#">View</a>
+               <ul>
+                       <li><a href="#">Fullscreen</a></li>
+                       <li><a href="#">Fit into view</a></li>
+                       <li>
+                               <a href="#">Encoding</a>
+                               <ul>
+                                       <li><a href="#">Auto-detect</a></li>
+                                       <li><a href="#">UTF-8</a></li>
+                                       <li>
+                                         <a href="#">UTF-16</a>
+                                     <ul>
+                                        <li><a href="#">Option 1</a></li>
+                                        <li><a href="#">Option 2</a></li>
+                                        <li><a href="#">Option 3</a></li>
+                                        <li><a href="#">Option 4</a></li>
+                                     </ul>
+                                  </li>
+                               </ul>
+                       </li>
+                       <li><a href="#">Customize...</a></li>
+               </ul>
+       </li>
+</ul>
 
-<div id="bar2" class="menubar-icons">
-       <a href="#">File</a>
-       <ul>
-               <li><a href="#">Open...</a></li>
-               <li class="ui-state-disabled">Open recent...</li>
-               <li><a href="#">Save</a></li>
-               <li><a href="#">Save as...</a></li>
-               <li><a href="#">Close</a></li>
-               <li><a href="#">Quit</a></li>
-       </ul>
-       <a href="#">Edit</a>
-       <ul>
-               <li><a href="#">Copy</a></li>
-               <li><a href="#">Cut</a></li>
-               <li class="ui-state-disabled">Paste</li>
-       </ul>
-       <a href="#">View</a>
-       <ul>
-               <li><a href="#">Fullscreen</a></li>
-               <li><a href="#">Fit into view</a></li>
-               <li>
-                       <a href="#">Encoding</a>
-                       <ul>
-                               <li><a href="#">Auto-detect</a></li>
-                               <li><a href="#">UTF-8</a></li>
-                               <li>
-                                 <a href="#">UTF-16</a>
-                             <ul>
-                                <li><a href="#">Option 1</a></li>
-                                <li><a href="#">Option 2</a></li>
-                                <li><a href="#">Option 3</a></li>
-                                <li><a href="#">Option 4</a></li>
-                             </ul>
-                          </li>
-                       </ul>
-               </li>
-               <li><a href="#">Customize...</a></li>
-       </ul>
-</div>
+<ul id="bar2" class="menubar-icons">
+       <li>
+               <a href="#">File</a>
+               <ul>
+                       <li><a href="#">Open...</a></li>
+                       <li class="ui-state-disabled">Open recent...</li>
+                       <li><a href="#">Save</a></li>
+                       <li><a href="#">Save as...</a></li>
+                       <li><a href="#">Close</a></li>
+                       <li><a href="#">Quit</a></li>
+               </ul>
+       </li>
+       <li>
+               <a href="#">Edit</a>
+               <ul>
+                       <li><a href="#">Copy</a></li>
+                       <li><a href="#">Cut</a></li>
+                       <li class="ui-state-disabled">Paste</li>
+               </ul>
+       </li>
+       <li>
+               <a href="#">View</a>
+               <ul>
+                       <li><a href="#">Fullscreen</a></li>
+                       <li><a href="#">Fit into view</a></li>
+                       <li>
+                               <a href="#">Encoding</a>
+                               <ul>
+                                       <li><a href="#">Auto-detect</a></li>
+                                       <li><a href="#">UTF-8</a></li>
+                                       <li>
+                                         <a href="#">UTF-16</a>
+                                     <ul>
+                                        <li><a href="#">Option 1</a></li>
+                                        <li><a href="#">Option 2</a></li>
+                                        <li><a href="#">Option 3</a></li>
+                                        <li><a href="#">Option 4</a></li>
+                                     </ul>
+                                  </li>
+                               </ul>
+                       </li>
+                       <li><a href="#">Customize...</a></li>
+               </ul>
+       </li>
+</ul>
 
 <table id="movies" class="ui-widget">
        <thead>
                        <td class="ui-widget-content">1993</td>
                        <td class="ui-widget-content">3.6</td>
                        <td class="ui-widget-content">
-                               <div class="menubar">
-                                       <a href="#">Options</a>
-                                       <ul>
-                                               <li><a href="#">Order...</a></li>
-                                               <li class="ui-state-disabled">Write a Review...</li>
-                                               <li><a href="#">Find Similar Movies...</a></li>
-                                               <li>
-                                                       <a href="#">Rate</a>
-                                                       <ul>
-                                                               <li><a href="#">5 stars</a></li>
-                                                               <li><a href="#">4 stars</a></li>
-                                                               <li><a href="#">3 stars</a></li>
-                                                               <li><a href="#">2 stars</a></li>
-                                                               <li><a href="#">1 stars</a></li>
-                                                       </ul>
-                                               </li>
-                                       </ul>
-                               </div>
+                               <ul class="menubar">
+                                       <li>
+                                               <a href="#">Options</a>
+                                               <ul>
+                                                       <li><a href="#">Order...</a></li>
+                                                       <li class="ui-state-disabled">Write a Review...</li>
+                                                       <li><a href="#">Find Similar Movies...</a></li>
+                                                       <li>
+                                                               <a href="#">Rate</a>
+                                                               <ul>
+                                                                       <li><a href="#">5 stars</a></li>
+                                                                       <li><a href="#">4 stars</a></li>
+                                                                       <li><a href="#">3 stars</a></li>
+                                                                       <li><a href="#">2 stars</a></li>
+                                                                       <li><a href="#">1 stars</a></li>
+                                                               </ul>
+                                                       </li>
+                                               </ul>
+                                       </li>
+                               </ul>
                        </td>
                </tr>
                <tr>