I have problem with expandable and collapsible menu on mouse hover, I have code like this:
html:
<div ng-mouseout="showMenu=false" class="dashboard-menu">
<div ng-show="showMenu" class="sub-menu">
<ul>
<li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li>
<li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li>
<li><a class="image"><span>Add an image</span><span class="icon"></span></a></li>
</ul>
</div>
<div ng-mouseover="showMenu=true"><span class="icon plus"></span></div>
</div>
css:
.icon {
width: 60px;
height: 60px;
display: inline-block;
background: #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.plus {
float: right;
}
.dashboard-menu {
position: fixed;
bottom: 10px;
right: 10px;
}
why menu hide when I'm out of .plus icon? How to fix it? Here is a plunker.
I was also able to get your code working by adding the ng-mouseover="showMenu=true" to the dashboard-menu div.
<body ng-app>
<div class="dashboard-menu" ng-mouseover="showMenu=true" ng-mouseout="showMenu=false">
<div ng-show="showMenu" class="sub-menu">
<ul>
<li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li>
<li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li>
<li><a class="image"><span>Add an image</span><span class="icon"></span></a></li>
</ul>
</div>
<div ng-mouseover="showMenu=true"><span class="icon plus"></span></div>
</div>
</body>
Using ng-mouseleave fixed the issue.
Related
I'm trying to achieve a solution where a horizontal line appears to the left of the text but the text remains centre aligned. Please see image below.
I've also added my mark-up below. I'm currently using Bootstrap 4.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
</div>
Use pseudo-elements to do so:
.sidebar-first-item {
position: relative;
}
.sidebar-first-item:before {
content: '';
position: absolute;
width: 45%;
height: 5px;
background-color: red;
top: 50%;
left: 0%;
}
CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg
First cleanup your html, a <ul> list may not have children other than <li>, <script> or <template> elements (see The Unordered List element). Hence remove the div's inside the <ul> and add their classes to the <li>.
A solution to your design problem is to add a element before and after your anchor elements, size them (width) with a percentage you like and set a min-width for the anchor, so you have a nice responsive layout also on small devices. This creates an equal width red line
If you want the red line to align with the width of the text, you can make your anchor non-breaking white space and a set a padding, so the red line comes as close as defined in the padding towards the text.
.redline,
.spacer {
width: 100%;
height: 3px;
display: inline;
background-color: red;
}
.spacer {
height: 0px;
}
li {
display: flex;
align-items: center;
}
li a {
margin: 0 auto;
border: 0px solid gold;
padding: 0 20px;
white-space: nowrap;
}
li p {
width: 100%; margin:-50px 0 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
<ul>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2 class="sidebar-first-item">About</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Take a look at our marvelous creations</p>
</li>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2>Our Work</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Behind the brand // Meet the team</p>
<li>
</ul>
</div>
This is where a CSS pseudo element can come into play! A pseudo element can be used to place designs before or after an element.
I added a class called horizontal-line to your h2.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="horizontal-line sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
The CSS will look like this.
.horizontal-line {
position: relative;
}
.horizontal-line::before {
content: "";
display: block;
width: 60px;
height: 2px;
position: absolute;
top: 50%;
left: 35%;
border-radius: 30px;
background-color: #DE657D;
}
By adding the pseudo element it will know to place it before any content with that class name. In this case, we are leaving content blank and placing in
https://jsfiddle.net/rc463gb8/1/
i have a side navigation menu which refers to the sections towards right side of the page ,whenever i resize the window and click the menu , the page gets scrolled horizonatally (scroll postion changing).making the content to overlap. how to fix , i have used overflow:y:hidden option but it doesnt work for small screen size.
html,
body {
height: 100%;
position: relative;
width: 100%;
}
.nav-link {
color: #000000;
border-radius: 9px;
padding-left: 1rem;
padding: 0.25rem 0.5rem;
font-size: 10pt;
}
<div class="set" id="Set">
<div class="content">
<nav id="nav">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link"> href="#info" </a>
</li>
<li class="nav-item">
<a class="nav-link">href="#section2" </a>
</li>
</ul>
</nav>
<div class="main">
<info ref='info' />
<section2 ref="section2" />
</div>
Been having difficulty trying to center vertically a Font Awesome icon, a 2 text line div, and 2 more icons in the same Bootstrap row div. I managed to fake the needed outcome but after hours trying out numerous CSS properties I'd love to hear what the best solutions was.
So the items I need to position vertically centered so those stay that way regardless of the containing element size are the 'fa fa-building-o fa-4x' icon, the 2 lines of text to its right ("X5 Retail Group" and "Company address and contacts"), both are of different font size (which I attempted to achieve with <h5> and <h3> tags), and the 2 icons to the right.
It was not required to make the sections of a certain height. The line-height property contains a number convenient to me at the moment.
The code was designed for Firefox 39.
Here's a Plunkr link to my html: https://plnkr.co/edit/0BVnHFowRD53KOVoy1KU?p=preview
Below is the .html of the page.
body {
padding-top: 20px;
}
section#top1 {
line-height: 40px;
}
section#top2 {
line-height: 80px;
}
.monitoring {
background-color: #E8E8E8;
}
.monitoringh4 {
display: inline;
}
.h4buttonlike:hover {
cursor: pointer;
font-weight: bold;
}
section#top3 {
line-height: 60px;
}
section#top4 {
line-height: 80px;
}
.container {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 5px;
}
.container .col-md-12 {
background: #e6e6e6;
border-radius: 4px;
}
.container .logo {
display: inline;
margin: auto 0 auto 0;
width: 80px;
}
.container h4 {
font-size: 1.0em;
display: inline;
margin-left: 5px;
text-align: center;
}
section#top1 .container ul {
display: table;
margin: auto 0;
float: right;
}
section#top1 .container ul li {
display: table-cell;
padding-right: 15px;
}
.settings i {
vertical-align: middle;
}
.container i {
margin-right: 5px;
}
.dropdown {
display: inline;
margin-left: 5px;
margin-top: 3px;
}
.myclass {
text-align: right;
}
section#top4 .brands {
position: absolute;
top: 50%;
display: inline-block;
/* margin-left: 20px; */
transform: translate(5%, -55%);
}
.exp {
height: 56px;
width: 44px;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.my-icons {
position: absolute;
top: 50%;
right: 15px;
transform: translate(-60%, -50%);
display: inline-block;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section id='top1'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<img class='logo' src='http://www.toennies.com/uploads/pics/fTRACE-Logo_02.png'>
<h4>Company name</h4>
<ul>
<li>Total items: 100</li>
<li style='color: #009900;'>Oline: 82</li>
<li style='color: #787878;'>Offline: 16</li>
<li style='color: #FF0000;'>Damaged: 6</li>
</ul>
</div>
<div class='clearfix'></div>
</div>
</div>
</section>
<section id='top2'>
<div class='container'>
<div class='row'>
<div class='col-md-9 monitoring'>
<div class='monitoringh4'>
<h4>Monitoring</h4>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Reports
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Report 1
</li>
<li>Report 2
</li>
<li>Report 3
</li>
</ul>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Tune
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Tune 1
</li>
<li>Tune 2
</li>
<li>Tune 3
</li>
</ul>
</div>
</div>
<div class='col-md-3 monitoring'>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
John Doe (Admin)
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Jane Doe
</li>
<li>Jack Doe
</li>
<li>Jimmy Doe
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id='top3'>
<div class='container'>
<div class='row'>
<div class='col-md-12 settings'>
<h4><i class="fa fa-desktop fa-2x"></i>Tuneup > Company profile > X5 Retail Group</h4>
</div>
</div>
</div>
</section>
<section id='top4'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='exp'><i class="fa fa-building-o fa-4x"></i>
</div>
<div class='brands'>
<h3>X5 Retail Group</h3>
<h5>Company address and contacts</h5>
</div>
<div class='my-icons'>
<h5><i class="fa fa-pencil-square-o"> Edit</h5>
</i>
<h5><i class="fa fa-print"></i>Print</h5>
</div>
</div>
</div>
</div>
</section>
Thank you.
I am trying to do menu similar to Chrome, inside drop down menu I want horizontal menu and vertical together.
my code:
<div id="mobileMenu" >
<ul class="nav">
<li><a href="" data-bypass>1</a></li>
<li><a href="" data-bypass>2</a></li>
<div class="oneLine">
<div class="row-fluid align-center">
<div class="span6">
<li><a href="" data-bypass>3</a></li></div>
<div class="span6">
<li><a href="" data-bypass>4</a></li><div></div>
</div>
</div>
</div>
<li><a href="" data-bypass>5</a></li>
<li><a href="" data-bypass>6</a></li>
<li><a href="" data-bypass>7</a></li>
</ul>
</div>
I thought maybe I can create additional class and divide this by different spans, to create one line with "3 and 4" horizontal, but it didn't work.
I tried without spans just with simple css:
.oneLine {
li {
display: inline;
a {
float: left;
clear:both;
width:50%;
border-right: 1px solid #969696;}
}
}
and it didn't work.
Maybe do you know how to do this?
Thanks a lot!
there are a lot possibilities of doing this.
Check this one http://jsfiddle.net/odd1y2nc/1/
<ul>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
</ul>
ul {
list-style: none;
}
ul li {
float: left;
width: 100%;
}
.horizontal {
width: 33%;
}
The screenshot below is my bootstrap navbar which works nicely (pills disappear one by one as per spec). However when scaled down to various screen sizes, the navbar is no longer in-line and becomes staggered.
The issue is worse in Chrome than in Firefox because the left hand section of the navbar does not sit at the top of the screen.
If I can get Chrome to look like the Firefox screenshot, this will help me fix the remaining issues.
Can anyone suggest which browser rendering inconsistency would explain why on the Chrome version, the left hand portion of the navbar does not sit flush with the top of the screen?
Top is Chrome, bottom is FireFox.
<header>
<div class="vr-nav-container" data-ng-controller="navBarController">
<div>
<div class="col vr-nav-col1">
<div class="nowrap">
<nav class='navbar navbar-default navbar-static-top no-padding" role="navigation"'>
<a class='navbar-brand' href='/Default'>
<img height="30" class="logo" alt="Flatty" src="/Assets/images/logo-small-rocket-lg.png" />
<img height="30" id="xs-toggler" class="logo-xs" alt="Flatty" src="/Assets/images/logo_xs.png" />
</a>
</nav>
</div>
</div>
<div class="col vr-nav-col2 fill center">
<div class="nowrap">
<nav class='navbar navbar-default navbar-static-top " role="navigation"'>
<div class="tabbable ">
<ul class="nav nav-pills contrast-background">
<li data-ng-repeat="item in NavBarViewModel">
<a href="{{item.Path}}"><i class="{{item.Icon}}"></i>
{{item.Title}}
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="col vr-nav-col3">
<div class="nowrap">
<nav class='navbar navbar-default navbar-static-top" role="navigation"'>
<ul class='nav'>
<li ng-controller="awardBoxController" class='dropdown medium only-icon widget'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
<i class='icon-trophy'></i>
<div class='label'>{{AwardSummary.TotalPoints}}</div>
</a>
<ul class='dropdown-menu'>
<li>
<div class="box-content box-statistic">
<h3 class="title text-error">{{AwardSummary.Level}}</h3>
<small>{{AwardSummary.TotalPoints}} points</small>
<div class="text-banana icon-trophy align-right"></div>
</div>
</li>
<li><a href="/#/Awards/My-Points/">
<div class='points-history box-content widget-body'>
<div class='pull-left icon'>
<i class='icon- text-banana'></i>
</div>
<div class='pull-left text'>
<span><strong>Point History</strong> <span class="see-all">- see all</span></span>
<small class='text-muted'>{{award.AcheivedDate}}</small>
</div>
</div>
</a></li>
<li ng-repeat="award in AwardSummary.Awards">
<a href='#'>
<div class=' box-content widget-body'>
<div class='pull-left icon'>
<i class='icon-{{award.Icon}} text-success'></i>
</div>
<div class='pull-left text'>
{{award.Name}}
<span class="text-muted">+{{award.Points}}</span>
<small class='text-muted'>{{award.AcheviedDate| fromNow}}</small>
</div>
</div>
</a>
</li>
<li class='divider'></li>
<li class='widget-footer'>
<a href='/#/Awards/High-Scores/'>High Scores</a>
</li>
</ul>
</li>
<li class='dropdown medium user-menu'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
<img width="23" height="23" src="/Assets/images/avatar.jpg" />
<span class='user-name'>
<asp:Literal ID="UserFirstNameLiteral" runat="server" meta:resourcekey="UserFirstNameLiteral">FirstName LastName</asp:Literal></span>
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='/UserAccount/UserProfile'>
<i class='icon-user'></i>
<%= this.GetGlobalResourceObject("MasterPage","Profile") %>
</a>
</li>
<li>
<a ng-if="ShowSettings" href='/Settings/Dashboard'>
<i class='icon-cog'></i>
<%= this.GetGlobalResourceObject("Resources","Settings") %>
</a>
</li>
<li>
<a ng-if="ShowSettings" href='http://todo.help.vr.zendeskurl.com'>
<i class='icon-bullhorn'></i>
<%= this.GetGlobalResourceObject("MasterPage","GetHelp") %>
</a>
</li>
<li class='divider'></li>
<li>
<form runat="server">
<asp:LinkButton ID="SignOutLinkButton" runat="server" OnClick="SignOutLinkButton_Click" meta:resourcekey="SignOutLinkButton">
<i class='icon-signout'></i> <%= this.GetGlobalResourceObject("Resources","SignOut") %>
</asp:LinkButton>
</form>
</li>
</ul>
</li>
</ul>
<div class='navbar-form navbar-right hidden-xs'>
<button class='btn btn-link dropdown-toggle' style="top: 4px;" name='button' data-toggle="dropdown" type='submit'><i class="icon-search"></i><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a category="" class="searchoption" href="#"><%= this.GetGlobalResourceObject("MasterPage","Everything") %></a>
</li>
<li class="divider"></li>
<li>
<a category="Deals" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Deals") %></a>
</li>
<li>
<a category="Contacts" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Contacts") %></a>
</li>
<li>
<a category="Accounts" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Accounts") %></a>
</li>
<li>
<a category="Tasks" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Tasks") %></a>
</li>
</ul>
<div class='form-group'>
<input value="" id="searchBox" class="form-control" placeholder='<%= this.GetGlobalResourceObject("Resources","Search") %>...' autocomplete="off" id="q_header" name="q" type="text" />
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
CSS
I am using the default bootstrap 3.0 CSS and have a seperate CSS file overriding some default CSS and adding my own
I had to do this because the pills section has to be in its own div in the centre column in order to work (disappear one by one and 'stack' as width decreases) and fill all the width between the left and right cols in the navbar.
.navbar-collapse:after {
clear: none;
}
.sorting, .sorting_asc, .sorting_desc {
background : none;
}
.top-buffer {
margin-top: 20px !important;
}
.removeclass{
font-size: 1.5em;
vertical-align: middle !important;
}
.removeclass:hover{
text-decoration: none;
}
.vr-navigation {
float: left;
width: 100%;
}
.rightnav {
float: right;
width: 285px;
margin-left: -160px;
}
.leftnav {
margin-right: 160px;
padding:0 10px;
width:auto;
height: 40px;
}
.nav-pills {
height: 40px;
}
.hidden-xs {
display: inline-block !important;
}
#media (max-width: 767px) {
.hidden-xs {
display: none!important;
}
}
.current {
font-weight: bold;
}
.nav-pills li a {
color: white;
}
.vr-nav-container
{
display: table;
}
.vr-nav-container > div
{
display: table-row;
}
.vr-nav-container > div > div
{
display: table-cell;
}
.vr-nav-container > div > div
{
padding: 0em;
}
.vr-nav-container .nowrap
{
white-space: nowrap;
}
.vr-nav-container .fill
{
margin: 0 auto;
}
.vr-nav-container .center
{
text-align: center;
}
.vr-nav-col1
{
/*background: red;*/
width: 5%;
min-width: 50px;
white-space: nowrap;
}
.vr-nav-col2
{
width: 50%;
margin: 0 auto;
/*background: yellow;*/
}
.vr-nav-col3
{
/*background: green;*/
width: 40%;
/*min-width: 260px;*/
}
.no-padding
{
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-nav-closed #main-nav .navigation > .nav > li:hover > a.toggler-flyout > span
{
display: none;
}
/*.main-nav-closed #main-nav .navigation > .nav > li:hover > a.toggler-flyout > i
{
content: "\f061";
}*/