I want to create a floating footer menu using JavaScript and HTML & CSS with other-sub menus for elements in the footer menu. The sub-menus also should float on mouse hoover. Is there any way i can fulfill these needs. Please help and Thank you.
It sounds like you're fairly new to CSS (no offence if you're not!)
To make it easier, I'd suggest using the Twitter Bootstrap framework - it'll save you a lot of time if you're new to CSS and save you from many common pitfalls.
Bootstrap has a Navbar component, which you can be fixed to the bottom of the site. I've attached some sample code, but I'd strongly recommend visiting the Bootstrap website and learning your way around - it'll be well worth your effort.
HTML (make sure you include the bootstrap stylesheet and javascript)
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Submenu Example
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Normal Item
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Dropup Item
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Related
In my project, I used Bootstrap Nav bar for navigation and also AngularJS as the framework. In desktop view, it's working fine. But in mobile view, the Nav bar is not working properly. It's not auto collapsing when we click on a link.
This is my Nav bar code:
<nav style="padding:0;margin:0;border:0;" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/" id="mainLogo">
<img style="max-width:200px;" src="img/logo.png">
</a>
</div>
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li class="submenu">
Home
</li>
<li class="submenu">
Our Collection
</li>
<li class="submenu">
About us
</li>
<li class="submenu">
Contact us
</li>
</ul>
</div>
</div>
</nav>
I tried many solutions and still no good.
You can check the real example here.
I tried some Angular code samples and also JS based solutions. Nothing works for me. Can you please provide me a working NavBar sample with Angular.
My Angular version is 1.3 and Bootstrap version is 3.x
Warning: it`s a very hacky solution but it should work pretty well.
As said in the comments it's hard to combine both logics.
Just use ng-click="isCollapsed = false" event on every navbar element:
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li class="submenu">
Home
</li>
<li class="submenu">
Our Collection
</li>
<li class="submenu">
About us
</li>
<li class="submenu">
Contact us
</li>
</ul>
</div>
If you have trouble with the combination of href and ng-click you can have a look here href overrides ng-click in Angular.js. Basically you can also move everything inside a function like collapseAndMove(href) and doing the routing and collapse stuff there.
"Bootstrap toggle-collapse expands my navbar menu but won't collapse it."
I've tried messing with the classes and data-target and adding extra script to no avail. The menu expands, then when toggled again it sometimes appears to flicker like it drops down and is immediately open again but most of the time nothing seems to happen. In the Chrome inspector aria=true never becomes false. It appears like it would change but always remains true.
My scripts are located in a separate layout file but they are working. All other functionality works and this even works halfway.
Here's the current code:
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<i class="fa fa-lock"></i>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="#navbar">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="{{ path('homepage') }}"><img src="{{ asset('img/logo-blue.png') }}" alt="Podify" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse" role="navigation">
{{ mopa_bootstrap_menu('AppBundle:Builder:mainMenu', { 'automenu': 'navbar' }) }}
<!--
<ul class="nav navbar-nav">
<li role="presentation" class="active">Features <span class="sr-only">(current)</span></li>
<li role="presentation">Pricing <span class="sr-only">(current)</span></li>
<li role="presentation">Contact <span class="sr-only">(current)</span></li>
</ul>
-->
<ul class="nav navbar-right nav-pills hidden-xs">
<li class="active"><i class="fa fa-lock"></i> Login</li>
<li>Join</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
My code doesn't show the nav tag closed for some reason here but i see it when editing my post.
I imagine it's something simple i'm overlooking. Any help will of course be greatly appreciated!
<script src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
this Jquery enables Toggle functionality.
I am using Bootstrap to create a website and have a menu that displays icons in the menu. When the menu button is clicked, the text will go next to each icon and push the menu out to the left so the text can fit.
<div id="wrapper">
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div id="title-text">
<h3>Title</h3>
</div>
<!-- <div id="logo"> <img src="img/logo.svg" alt="logo" /> </div> -->
<nav id="nav" class="navigation" role="navigation">
<ul class="newnav">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span></li>
<li data-section="2" class=""><i class="icon-user"></i> <span>About</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span> </li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Social</span> </li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span> </li>
</ul>
</nav><!-- /nav -->
</div><!-- /sidebar -->
At the moment, the spans expand to let the text in, it works fine but I would like it to be animated.
This is the majority of the code so far, although the live view isn't working.
JSFiddle
As you can see, when the top left button is clicked (.btn-navbar) the .expand CSS kicks in and changes the width from 0 to auto. I basically need the same thing but animated but cannot figure it out for the life of me.
Please can someone point me in the right direction?
Kind regards,
Tom
You can't animate to auto using CSS or native Jquery (at least when I last checked)
There is a JS/JQ method though
http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/
So, I know this is a common question, but I've tried everything and can't get it to work. When I click on it nothing happens. Bootstrap and JQuery load.
JFiddle: http://jsfiddle.net/qqS4F/
Code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /.btn -->
<a class="brand" href="#">S&J Bakery</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li class="dropdown" id="#dd">
<a href="#dd" class="dropdown-toggle" data-toggle="dropdown" role="button">
Menu
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li href="#lunch">Lunch</li>
<li class="divider"></li>
<li href="#cake">Cake</li>
</ul>
</li>
<li>
Contact Us
</li>
<li>
Sponsers
</li>
</ul>
<!-- /.nav -->
</div>
<!-- ./nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar navbar-inverse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-wrapper -->
Tips48,
It looks like you are using a version of the bootstrap css file that doesn't account for dropdown menus. I've updated the fiddle with the correct items and it is working properly for me (see screenshot below):
In case you need the link to the css file, here it is. Also, you can grab the latest version from the main site at http://twitter.github.io/bootstrap/index.html One nice feature is the "Customize" section, where you can tweak what you want/don't want in your project. Hopefully this helps.
Good luck and have fun!
My bootstrap nav bar adds a span and italicizes the active tab instead of just adding the active class to the active tab. My code is as follows:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="#">Wutup?!</a>
<div class="nav-collapse">
<wicket:link>
<ul class="nav">
<li>Nearby Events</li>
<li>My Events</li>
<li>Manage My Events</li>
<li>About</li>
</ul>
</wicket:link>
</div>
</div>
</div>
</div>
The behavior can be seen here: screenshot
When you use the wicket auto-link feauture (i.e. wicket:link) it generates span instead of adding class to your HTML. For example if "My evenets" was the active page, the could would look like this:
<ul class="nav">
<li>Nearby Events</li>
<li><span><em>My Events</em></span></li>
<li>Manage My Events</li>
<li>About</li>
</ul>
If you want to avoid that, you should not use the autolinking feauture, or just change the css to suits the wicket's html that is generated.