SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to Change Menu Hover from Toggle

    I want to change the horizontal menu to hover and display the drop down submenu. Right now it does not have hover unless you click the arrow.
    I want it to display without clicking it.

    Code:
    <!-- Menu -->       
            <div class="navbar">                                
                <div class="navbar-inner">                                  
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a><!-- /nav-collapse --> 
    <div class="nav-collapse collapse">                                     
                        <ul class="nav top-2">
                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
                                    <b class="caret"></b>                            
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="index.html">Option1: Landing Page</a></li>
                                    <li><a href="page_home.html">Option2: Header Option</a></li>
                                    <li><a href="page_home4.html">Option3: Revolution Slider</a></li>
                                    <li><a href="page_home5.html">Option4: Amazing Content</a></li>
                                    <li><a href="page_home1.html">Option5: Mixed Content</a></li>
                                    <li><a href="page_home2.html">Option6: Content with Sidebar</a></li>
                                    <li><a href="page_home3.html">Option7: Aplle Style Slider</a></li>
                                    <li><a href="page_home_all.html">Home All In One</a></li>
                                </ul>
                                <b class="caret-out"></b>                        
                            </li>
                            <li class="active">
                                <a href="" class="dropdown-toggle" data-toggle="dropdown">Pages
                                    <b class="caret"></b>                            
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="page_about.html">About Us</a></li>
                                    <li><a href="page_services.html">Services</a></li>
                                    <li><a href="page_pricing.html">Pricing</a></li>
                                    <li><a href="page_coming_soon.html">Coming Soon</a></li>
                                    <li><a href="page_faq.html">FAQs</a></li>
                                    <li><a href="page_search.html">Search Result</a></li>
                                    <li><a href="page_gallery.html">Gallery</a></li>
                                    <li><a href="page_registration.html">Registration</a></li>
                                    <li><a href="page_login.html">Login</a></li>
                                    <li><a href="page_404.html">404</a></li>
                                    <li><a href="page_clients.html">Clients</a></li>
                                    <li class="active"><a href="page_privacy.html">Privacy Policy</a></li>
                                    <li><a href="page_terms.html">Terms of Service</a></li>
                                    <li><a href="page_column_left.html">2 Columns (Left)</a></li>
                                    <li><a href="page_column_right.html">2 Columns (Right)</a></li>
                                </ul>
                                <b class="caret-out"></b>                        
                            </li>
                            <li>
                                <a href="" class="dropdown-toggle" data-toggle="dropdown">Features
                                    <b class="caret"></b>                            
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="feature_grid.html">Grid Layout</a></li>
                                    <li><a href="feature_typography.html">Typography</a></li>
                                    <li><a href="feature_thumbnail.html">Thumbnails</a></li>
                                    <li><a href="feature_component.html">Components</a></li>
                                    <li><a href="feature_navigation.html">Navigation</a></li>
                                    <li><a href="feature_table.html">Tables</a></li>
                                    <li><a href="feature_form.html">Forms</a></li>
                                    <li><a href="feature_icons.html">Icons</a></li>
                                    <li><a href="feature_button.html">Buttons</a></li>
                                </ul>
                                <b class="caret-out"></b>                        
                            </li>
                     </ul>
              </div>
          </div>
     </div>

    Code:
    /*Menu*/
    .navbar, 
    .navbar-inner, 
    .nav,
    .navbar-inverse {
    	background:#fff;
    	filter:none;
    	border:none;
    	padding:0;
    	margin:0 !important;
    	-webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }
    
    .nav i.icon-sort-up { 
    	position:absolute; 
    	font-size:13px;
    	bottom:-6px;
    }
    
    .navbar-inner {
    	padding-left: 0px !important;
    	padding-right: 0px !important;
    }
    
    .navbar .nav > li { 
    	display:block; 
    	position:relative;
    }
    .navbar .nav > li > a {
    	display:block;
    	font-size:15px;
    	font-weight:400;
    	color: #687074;
    	text-shadow:none;
    	padding:9px 20px;
    	text-transform:uppercase;
    	border-bottom:solid 2px #eee;
    	font-family:'Open Sans', sans-serif;
        -webkit-transition:all 0.4s ease-in-out;
        -moz-transition:all 0.4s ease-in-out;
        -o-transition:all 0.4s ease-in-out;
        transition:all 0.4s ease-in-out;
    }
    
    .collapse.in ul { 
    	margin-top:10px !important;
    }
    
    .collapse.in li a { 
    	padding:0 10px;
    	border-bottom:solid 1px #eee;
    	background:none;
    }
    
    .collapse.in li a:hover,
    .collapse.in li a.dropdown-toggle { 
    	border-bottom:solid 1px #72c02c !important;
    	background:none;
    }
    
    .collapse.in ul.dropdown-menu {
    	margin-bottom:5px;
    }
    
    .collapse.in ul.dropdown-menu a {
    	padding:5px;
    	border-bottom:solid 1px #bbb; 
    }
    
    .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
    	margin:0 !important;
    	border-radius:0 !important;
    }
    
    .navbar .nav > li > a:focus,
    .navbar .nav > li > a:hover {
      	color:#72c02c;
    	border-bottom:solid 2px #72c02c;
    }
    
    .navbar .nav > .active > a,
    .navbar .nav > .active > a:focus {
      	color:#72c02c;	
      	text-decoration:none;
    	border-bottom:solid 2px #72c02c;
      	background:none;	
      	-webkit-box-shadow:none;
           -moz-box-shadow:none;
              	box-shadow:none;
    }
    
    .navbar .nav > .active > a:hover {	
      	color:#72c02c;	
    	background:none;		
    	border-bottom:solid 2px #72c02c;
      	-webkit-box-shadow:none;
           -moz-box-shadow:none;
              	box-shadow:none;
    }
    
    /*Arrow for menu*/
    .navbar .nav > li > a .caret {
      margin:9px 0 0 3px !important;	
      border-top-color: #72c02c!important;	
      border-bottom-color: #72c02c !important;
    }
    
    /*Dropdown Menu*/
    .dropdown-menu { 
    	padding:0;
    	border:none;
    	margin-top:-2px; 
    	min-width:200px;
    	border-radius:0; 
    	border-top:solid 2px #72c02c; 
    	border-bottom:solid 2px #687074; 
    	z-index: 9999 !important;
    }
    .dropdown-menu li a { 
    	color:#687074; 
    	font-size:13px; 
    	font-weight:400; 
    	padding:6px 15px; 
    	border-bottom:solid 1px #eee;
    }
    .dropdown-menu li > a:hover,
    .dropdown-menu li > a:focus,
    .dropdown-submenu:hover > a {
      color:#ffffff;
      background:#687074 !important;
        -webkit-transition:all 0.2s ease-in-out;
        -moz-transition:all 0.2s ease-in-out;
        -o-transition:all 0.2s ease-in-out;
        transition:all 0.2s ease-in-out;
    	filter:none !important;
    }
    
    .dropdown-menu .active > a {
    	color:#ffffff !important;
      	background:#687074 !important;
    	filter:none !important;
    }
    
    .navbar .btn-navbar {
    	padding:10px 15px;
    	margin-top:1px;
    	margin-right:0;
    	background:#72c02c;
    	border:none !important;	
    }
    .navbar .btn-navbar:hover {
    	background:#5fb611;
    }
    .navbar .btn-navbar span, 
    .navbar .btn-navbar:hover span { 
    	background:#fff !important;
    	box-shadow:none !important;
    }
    
    .navbar .nav > li > .dropdown-menu:after {
    	left:19px;
    }
    .navbar .nav > li > .dropdown-menu:before {
    	left:18px;
    	border-bottom:none;
    }
    .navbar .nav > li > .dropdown-menu:after {
    	left:19px;
    	border-top-color: #72c02c !important;
    	border-bottom-color: #72c02c !important;
    }
    I had edited this part : <a href="#" class="dropdown-toggle" data-toggle="dropdown">

    to this : <a href="#"> Yet it did not drop down
    Last edited by lukkas; Oct 30, 2013 at 19:31. Reason: more info


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •