Hacking U.S. Secrets, China Pushes for Drones
www.nytimes.com
A two-year hacking operation by a group linked to China’s army is the latest sign of Beijing’s ambitious plans to be at the forefront of drone manufacturing. ]]>
Contact:
Chelsea Williams
Communications Manager
410-455-6380
chelseah@umbc.edu
The Maryland Clean Energy Center (MCEC) today announced it has closed a $5.4 million Maryland Clean Energy Capital (MCAP) deal to fund lighting, irrigation, and energy management system upgrades at the University of Maryland, Baltimore County (UMBC). NORESCO will serve as the energy service company (ESCO), designing and installing the upgrades, and the Maryland Clean Energy Center is the bond issuer financing the debt. The end result will be energy savings and greater efficiency on the UMBC campus.
UMBC utilizes a prioritized approach for managing energy and utilities whereby energy projects are selected based upon their cost-effectiveness. After performing a campus-wide energy audit and considering numerous energy conservation measures (ECMs), the project was carefully developed. It includes interior lighting upgrades throughout most campus buildings, LED lighting for three parking garages, web-based/weather-optimized irrigation controls, and demand control ventilation for several lecture halls.
Shawn Blum, UMBC’s Energy Manager said, “This project will generate tremendous savings in energy and water consumption. We predict annual savings will be more than 7,000,000 kWh of electricity and 3,000,000 gallons of water. Within ten years, the project will pay for itself via the associated utility savings. The environmental benefits are impressive as well. UMBC’s greenhouse gas emissions will be reduced by over 3,800 MTeCO2 per year, which represents a 4.3% reduction in UMBC’s carbon footprint versus the baseline.”
“UMBC is pleased to implement these lighting, irrigation, and control systems upgrades,” said Rusty Postlewate, Assistant Vice President of Facilities Management at UMBC. “By working with the Maryland Clean Energy Center through its MCAP program, we have been able to undertake this project for the University.”
The Maryland Clean Energy Center MCAP program is available to all Maryland universities, hospitals, municipalities, and schools (MUSH market). MCAP enables non-profit organizations in Maryland to replace inefficient infrastructure assets and avoid incurring this additional debt.
Jeffrey Eckel, Chairman of the MCEC Board and President & CEO of Hannon Armstrong Sustainable Infrastructure said, “We commend the leaders of UMBC for taking advantage of the new MCAP financing program that was created from the vision of Governor Martin O’Malley, without tax-payer support, and allows MCEC to accelerate otherwise stalled capital projects. Through this program, MCEC can foster savings for Maryland institutions, create jobs, and reduce greenhouse gas emissions.”
“It is a win-win-win program and a remarkable model for public-private partnerships. To date, both Coppin State University and UMBC have taken advantage of MCAP financing program,” said Katherine Magruder, Executive Director of the Maryland Clean Energy Center. “Our tax exempt financing capabilities are available to municipalities, hospitals, and not-for- profit entities as well as schools and universities in Maryland.”
Randy Clark, senior vice president, NORESCO, added, “NORESCO is honored to enter into a contract to help UMBC achieve its energy efficiency and cost reduction goals. We are also proud to be among the first to develop an energy performance contract under MCEC’s unique financing approach whereby the University benefits from important upgrades to its facilities.”
MCEC is a self-financing driver of clean energy, economic development, energy innovation, and clean tech jobs in the State of Maryland. Hannon Armstrong Sustainable Infrastructure (NYSE: HASI), an Annapolis-based energy investor, helped create the MCAP structure and arranged the financing for MCEC on a pro bono basis. To learn more about MCEC’s MCAP program and other initiatives of the MCEC visit www.mdcleanenergy.org.
About Maryland Clean Energy CenterThe Maryland Clean Energy Center (MCEC) is an instrumentality of the state, created by the legislature in 2008 to advance adoption of clean energy and energy efficiency technologies and practices as an economic development strategy. MCEC assists consumers, supports businesses and advises policymakers. MCEC operates the Maryland Home Energy Loan Program (MHELP) to assist residential property owners finance energy efficiency measures, and manages the Maryland Clean Energy Capital (MCAP) program to finance projects for municipal, university, school, hospital and other not-for-profit organizations. To learn more, visit www.mdcleanenergy.org. Contact MCEC at 443-949-8505
About UMBC UMBC combines the emphasis on teaching found at the best liberal arts colleges with the innovation of a research university. UMBC’s 13,000 undergraduate and graduate students come from more than 150 countries and take full advantage of the educational, business, cultural, and recreational resources of Baltimore and Washington, D.C. UMBC students work alongside faculty who are leaders in their fields; think about the hard questions of society, science, and creative expression; and then move beyond the classroom to make a difference. UMBC is a member of the University System of Maryland and is accredited by the Middle States Association of Colleges and Secondary Schools. For more information, please visit http://www.umbc.edu.
About Hannon Armstrong Sustainable Infrastructure Hannon Armstrong Sustainable Infrastructure (“Hannon Armstrong”) (NYSE:HASI) makes debt and equity investments in sustainable infrastructure projects. We focus on profitable projects that increase energy efficiency, provide cleaner energy, positively impact the environment, or make more efficient use of natural resources. With over 30 years of experience, Hannon Armstrong works primarily with Global 1000 clients on essential infrastructure projects involving the U.S. federal, state and local governments as well as institutions and private developers. We target projects that have high credit quality obligors, fully contracted revenue streams and inherent economic value. To learn more, visit www.hannonarmstrong.com.
About NORESCOAs one of the largest energy services companies in the U.S., NORESCO utilizes design-build, performance-based contracting vehicles and asset monetization solutions to deliver energy and maintenance savings and significant infrastructure upgrades to existing facilities. NORESCO has guaranteed more than $3 billion in energy and operating cost savings at more than 7,000 facilities throughout the U.S. and abroad. NORESCO also offers a full suite of consulting services to integrate sustainable design strategies into new construction and existing buildings. NORESCO is a part of UTC Climate, Controls & Security, a unit of United Technologies, a leading provider to the aerospace and building systems industries worldwide.
    
|
I have been a member of the BreakingGround Community Program Committee (formerly known as "UMBCServes") for almost 5 years, working with creative change agents from the Shriver Center, Residential Life, Student Life, GSA and SGA. From a committee that formed to coordinate UMBC departments’ community service programs, we have evolved into a connection point and advisory group for student organizations and departments hoping to make creative, meaningful contributions to positive social change.
Thanks to Provost Philip Rous, we also can provide financial support to innovative projects (a total of $5,000 for 2013-2014). ... (continue reading)
Ok so a couple of weeks now, on it’s very own two year anniversary Mark Otto and the rest of the guys responsible for the develop and maintenance of Bootstrap announced the official release of the framework’s third version, and it came on steroids, let’s see what we’re getting.
First off, the most important changes you’re going to find in the new Bootstrap release is the support for responsive websites, as a matter of fact the responsive module has been removed. Now, from its core, Bootstrap is responsive, more than that, this new version comes with the approach of “Mobile First”, meaning that almost everything has been redesigned to start from a lower screen size and scale up (more on that in a bit).
Nearly everything has been redesigned and rebuilt to start from your handheld devices and scale up.
In the look and feel you’ll see a lot of changes too, prominently the fact that the whole style has gone flat, and there’s an optional theme for a 2.0-er look. Additionally, the icons have gone from images to a font, which is really handy to use when needing different sizes and colors.
Let’s start talking about the Grid System, oh the Grid, as a matter of fact, there are four Grid Systems in this new version of Bootstrap, each works exactly the same, being differentiated by the screen size width at which they operate.
In order for the Grid System to work properly and also to ensure proper rendering and touch zooming, add the viewport meta tag to your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
There are four Grid Systems in this new version of the framework, with the width of the viewport being the parameter that differentiates them. The widths that set the frontiers between one and another are as follows:
And each of the different supported viewports have a particular class to address it, as follows:
To make use of the Grid System you’d need a container element, with a class "container", and inside a second container with a class "row". Notice how in both cases the “fluid” suffix has disappeared, this in contrast with Bootstrap 2. And inside the second container you’d place your columns.
<div class="container">
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
As I mentioned earlier, this new version of Bootstrap comes with a Mobile First approach, what this means is that the columns with a class suffixed with an "xs" are always going to be floated horizontally, no matter the viewport size. If you were to say, use columns prefixed by an "md" and the viewport happened to be less than 992px wide (even 991px), those columns will stack one below the other with a 100% width, as in the next example.
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
When this page is viewed at a viewport of 992px or more, it will look like this:
If you would happen to see that document in a viewport of 991px or less, it would look as follows:
You can also combine classes to address your elements at a given viewport size. For instance, if in the following example you’d need the first two columns floated side by side in small devices (sm) and stacked on phones, you could add the col-sm-6 in addition to the col-md-4 class.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
<div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
<div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
</div>
In this case, opening the page in a viewport larger than 991px you’d see three equal columns, one next to the other, just like in the last example. However, if you’d see it in a viewport with a width between 768px and 991px, you’d get the following result:
As in the example above, you can combine and nest columns in a lot of different combinations to create very complex layouts. There’s a lot more to the Grid System in Bootstrap, but going into detail about every aspect of it would take a while to cover, so for a deeper look into it I’d strongly suggest that you go ahead and take a look at the documentation.
Most of the classes for the Base CSS part of Bootstrap have remained the same, however there are some changes that we must keep in mind when using this new version.
The code as a whole, has being re-written and variable names have changed. If you look at the .less files, you’ll find that all the variables in the framework have switched from camelCase to use hyphens for word separation, and also every variable name has been standardized in a “element-state-pseudo state” approach. What this means is that element-specific styles like:
<ul class="unstyled">...</ul>
Now are prefixed with the element that they are applied to, so in this new version of Bootstrap the previous list would become.
<ul class="list-unstyled">...</ul>
The same applies for lists with an “inline” style applied to them. Some other changes in the variables names reflecting in the classes that we’ve known from the earlier days are those related with size, for instance with buttons, in version 2.* you’d have:
<button class="btn btn-mini"></button>
<button class="btn btn-small"></button>
<button class="btn btn-large"></button>
This size suffixes have changed to match the overall naming convention and this is the same as for the Grid System, so the previous buttons declaration for version three becomes:
<button class="btn btn-xs"></button>
<button class="btn btn-sm"></button>
<button class="btn btn-lg"></button>
The same applies for input sizes and visibility declarations as well.
The overall syntax and layout for the tables remain the same in this version of the framework, but, loyal to the whole “Mobile First” paradigm, now we have responsive tables in this iteration of Bootstrap. To take advantage of it, simply wrap the whole table in a container with a class of “responsive-table“, what this will do is make the tables scroll horizontally in small devices (< 768px).
<div class="table-responsive">
<table class="table">...</div>
</div>
And the resulting table:
In the CSS department, it’s in the Forms where you’d see the major differences. For starters, every input in a form in Bootstrap three is now displayed as a “block” element with a 100% width. The “size” attributes you can modify with a class in form controls relate to the padding and font-size of the element and not the width, to control that you’d need to put it in a container of the desired width.
The markup for the forms has also changed, in it’s most basic form, in version 2.* a form would look something like this.
<form>
<fieldset>
<legend>...</legend>
<label for="input">...</label>
<input type="text" name="input" placeholder="..." >
</fieldset>
</form>
The markup for the same form in the new version adds an extra element, and a class to the input itself, and goes as follows.
<form role="form">
<fieldset>
<legend>...</legend>
<div class="form-group">
<label for="input">...</label>
<input type="text" name="input" class="form-control" placeholder="..." >
</div>
</fieldset>
</form>
Bootstrap has been created with Accessibility in mind, that’s the reason for the “role” attribute addition, note also that the label/input combo is wrapped inside a wrapper with a class of “form-group“, and like everything else, this has to do with the responsive nature of the framework.
The search form is gone in this version, and since all inputs and textareas are 100% width by default, special consideration has to be taken with inline forms, however the markup for these is almost identical to that of the previous form.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="pass">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Note the addition of the class “form-inline” to the form element, and that of “sr-only” to the label, this last class has to do with the Accessibility part of the framework. The use of a label is optional with inline forms, however it’s highly encouraged and doesn’t hurt anyone. And by the way, the “sr-only” stands for Screen Reader only. So screen readers will find the label and “say it” to the user.
Lastly, to create a horizontal form you simply set the width of the label by setting it’s “col-md-” or “_sm” or whatever and the corresponding “control-label” class, just as with version two., and then wrap the input in a container with its own column width specified.
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" for="email">Email address</label>
<div class="col-md-3">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
</form>
And the resulting form.
There are some other changes that have been made in regard to forms, like the removal of “input-prepend” and “input-append” classes, in favor of “input-group” and “input-group-addon“. However, there’s a lot more to cover yet, so for details on that, please refer to the documentation.
Another area where you’re going to find major changes is in the framework’s icons. The icon library includes 40 new glyphs, and not only that, they switched from using images to fonts, so now instead of adding the two “glyphicons-*” images to your “img” folder, you’ll have to add the four “glyphicons” fonts to your “fonts” directory, and yes, four of them. This has to do with the browser’s compatibility.
For performance reasons, every icon requires a base class and a icon specific class. So now, to add a user icon you’d use:
<span class="glyphicon glyphicon-user"></span>
The switch from images to fonts, gives control to icon coloring and sizing, and also allows you to replace the default icons with some custom ones you may like. If you happen to wonder where you might find such font icons, Fontello is a great resource.
Although redesigned and recreated, the JavaScript Components in Bootstrap 3.0 keep the same names and usage. With a couple of slightly and not that gentle differences.
Perhaps one of the most used plugins in Bootstrap is Modals. You’ll find it is quite similar, with the differences being that the containers “modal-header”, “modal-body” and “modal-footer” are not wrapped inside a “modal-content” inside a “modal-dialog” container. So what used to be:
<div class="modal hide fade">
<div class="modal-header"></div>
<div class="modal-content"></div>
<div class="modal-footer"></div>
</div>
Changes to:
<div class="modal fade">
<div class="modal-content">
<div class="modal-dialog">
<div class="modal-header"></div>
<div class="modal-content"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Yes, it’s a little more markup, but it improves the responsiveness of the component and also allows it to scroll the whole viewport instead of having a “max-height” parameter.
To trigger them via JavaScript, you’d use the same method as before.
$( '#my-modal' ).modal('show');
The rest of the plugins remain mostly the same. On a special note, the accordion is gone in favor of collapsible panels, they work pretty much the same and have a very similar syntax. With some classes changing a bit, they still require the transitions plugin and don’t require any extra containers.
Also, the Typeahead plugin has disappeared from Bootstrap in favor of Twitter’s Typeahead plugin.
JavaScript events are now namespaced, but what does mean to you? Well, in Bootstrap two, to listen for the moment when some alert in your site was “close“, you’d add:
$( '#my-alert' ).bind( 'close', function() {});
Now in this third version, the event name has changed, it is namespaced to the framework, so the previous snippet would be:
$( '#my-alert' ).bind( 'close.bs.alert', function() {});
Go ahead and take a look at the rest of the JavaScript Components Bootstrap has to offer (which, are still dependent on jQuery).
There are a couple new components in the CSS part of the framework, list groups and panels.
List groups, from the official documentation.
… are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
To create a list group simply create an unordered list with a “list-group” class, and add the “list-group-item” to every list item.
<ul class="list-group">
<li class="list-group-item">Lorem ipsum...</li>
<li class="list-group-item">Dolor sit...</li>
</ul>
You can add the “active” class to any item in the list to highlight it, also if you happen to place a badge inside it, it will be centered vertically and align it to the right, inside the item. Go ahead and try it.
Panels are a way to box in some content in your site or application, highlight it and give it a sense of unity. The panel markup is fairly simple, and its contents can be combined with different elements to achieve a unique look and feel.
Panels can have headers and footers and get a special meaning with the well known “sucess“, “error“, “warning“, etc. classes. For instance.
<div class="panel panel-success">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"><p>Some content here</p></div>
<ul class="list-group">
<li class="list-group-item">Lorem ipsum...</li>
<li class="list-group-item">Dolor sit...</li>
</ul>
</div>
As you can see, panels work well with list groups, and also with non-bordered tables.
Also new in this version is the Customizer in which, not only the look has changed, is far better organized and gives you control on things like the viewport width at which a certain Grid System takes control.
As always, you can set all your fonts styles and colors. It’s a huge topic on its own so I’d encourage you to go on your own and mess with it.
Long has been the suffering brought to all of us by Internet Explorer, it’s version six was a total nightmare and its predecessors still have a lot of catching up to do. In version 2.* Bootstrap’s team still supported the version seven of Microsoft’s browser. In this new iteration of the framework, support for IE seven is gone, as well as for Mozilla Firefox 3.6 and below.
Specifically, Bootstrap supports the latest version of all the major browsers (Safari, Opera, Chrome, Firefox and IE), in both Windows and Mac when there are both.
For IE, it supports version eight and forward, and although there are some properties that the browser doesn’t render, such as “border-radius“, the framework is fully functional only with some minor look and feel differences. Also IE eight requires respond.js for media query support.
To get a detailed list of workarounds and gotchas for the different browsers (cough Internet Explorer cough) look at the official docs.
Since its beginning, Bootstrap has been a great tool for rapid prototyping and creation of great sites and web applications and this third version is no different. If you need just one reason to use it, I would definitely go for the Grid System, with the growth of mobile browsing and the always increasing viewport sizes out there, responsiveness is a must now, more than ever. And in this latest version, that’s the area where Bootstrap shines the most.
]]>
If you’re looking for a quick fix of typographic inspiration then boy, do I have a treat for you. It comes in the form of Typewolf.
Typewolf is a showcase of typographic inspiration that identifies the fonts used in each of the featured designs. The site is curated by designer Jeremiah Shoaf, whose aim is to create a one-stop resource for designers seeking typographic inspiration for the modern web.
Also featured is a weekly countdown of the top 10 Dribbble shots as well as a collection of the best fonts available from Google Fonts.
The site is updated daily and new Dribbble shots are added every Monday. Be sure to check it out.
What are your favourite sources of typographic inspiration? Will you be using Typewolf in the future? Let us know in the comments.
| 20 Fantastic Ready to Print Retro Templates – only $24! |  |
|
|
The following is a guest post by Ray Messina. Ray was interested in sharing this technique as a way to pay forward things he's learned from this site in the past, which is awesome. You might be aware of the jQuery .has method, which allows you to select an element if it has any of another selector as a descendant. There is sadly no such selector in CSS yet. But if you know a little something about the HTML structure, you can use a combination of positional selectors to mimic it. Ray will explain.
Recently, I was working on a dropdown navigation bar and wanted to differentiate the menu items which contained sub menus from those that didn't. I wanted to be able to do this automatically, without relying on JavaScript or having to add classes to the markup. I just wanted it to work as if the item just knew it had a sub menu or not.
As you probably know, menus are lists of links and, as such, it is standard practice to mark them up as <ul>s. By extension, drop down menus are merely nested <ul>s. Dropdowns are a common component of modern (and not so modern) web design. Using pure CSS, one can style the upper level of a navigation menu any which way, and hide the sub levels so that they are revealed only when the visitor hovers on the appropriate area.
Many designers are satisfied with leaving as that. However, from a UX/UI point of view, this is lacking as it leaves the user having to explore the entire menu to find which sections contain additional navigation links. This means visitors will either waste their time looking and get frustrated for doing so or miss areas of your site all together! That's no good at all.
The common way to address this issue, is to simply add a class to the <li>s that contain <ul>s (sub menus) so that we can style those items differently from those that do not contain sub navigation. Pretty simple, but also pretty tedious and not particularly graceful.
Another way, assuming that upper level items are not coded as links, is to use that difference in tags as leverage. That is, create faux links: style <span>s that's are direct children of the <li> to indicate that there are more links that follow and, by contrast, style anchor tags as not having additional sub items. This is handy if your drop-down is simple and you can structure it specifically that way. It's cleaner in that you don't have to add "submenu" classes to your markup but, just as before, it still requires that you structure the content of your list manually or that your CMS can foretell which list items will contain other <ul>s as sub menus.
I had come across other methods of automatically styling list items which contain other lists, but they employed absolute positioning and a pseudo element off the child <ul>. While clever, the CSS calculations can be tricky at times or the method may be entirely impossible to implement depending on what other techniques you have used to lay out your menu and/or position your submenus, or the overall effect you desired to achieve.
Ideally, it would be great if there was a CSS selector that would let us query if an element contained another kind of element as a direct child, something akin to jQuery's .has() method.
We can can achieve nearly the same thing with li a:first-child:nth-last-child(x) { }.
The key is having an expected child count (HTML element planned parenthood?). Most likely it will be two elements: the anchor and the <ul>, though one can tweak this technique to work for any number or child elements, as long as you have a regular pattern.
Here is a quick example. The markup is just your standard nested UL, but note that I have only used one class in the HTML, on the root <ul>. Test this out yourself, add any number of nested lists at any level!
Let's put this idea to the test!
<nav>
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Resume</a>
<ul>
<li><a href="#">item a lonng submenu</a></li>
<li><a href="#">item</a>
<ul>
<li><a href="#">Ray</a></li>
<li><a href="#">Veronica</a></li>
<li><a href="#">Bushy</a></li>
<li><a href="#">Havoc</a></li>
</ul>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Download</a></li>
<li><a href="#">Rants</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Some general styling to bring in the sexy:
nav {
display: block;
text-align: center;
}
nav ul {
margin: 0;
padding:0;
list-style: none;
}
.nav a {
display:block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav{
vertical-align: top;
display: inline-block;
box-shadow:
1px -1px -1px 1px #000,
-1px 1px -1px 1px #fff,
0 0 6px 3px #fff;
border-radius:6px;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
.nav > li > a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #555;
}
.nav > li:hover,
.nav > li:hover > a {
border-bottom-color: orange;
}
.nav li:hover > a {
color:orange;
}
.nav > li:first-child {
border-radius: 4px 0 0 4px;
}
.nav > li:first-child > a {
border-radius: 4px 0 0 0;
}
.nav > li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav > li:last-child > a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px;
}Then the magic happens:
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50% ;
right:5px;
}That's essentially the active ingredient of this technique. For this example, I used the :before pseudo element off the anchor element to draw the arrows. The pseudo element is not necessary to the technique. I could have just as easily changed backgrounds on the anchor itself instead; you can make it do most anything you want once you have targeted the element.
Finally, just to polish it off, some positioning and arrow styling CSS code.
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 1;
left: -99999em;
}
.nav > li:hover > ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before {
border-top-color: #aaa;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}Here is the whole thing in action at CodePen:
As you probably guessed, you could also use other selector/selector combinations such as :only-child, :first-child:last-child, :first-child:not(:last-child) and the like. But I have found that :nth-child(x):nth-last-child(x) gives the most flexibility and serves as a built-in fallback (as it allows us to target the element directly, rather than by exclusion), and there is little cross browser support advantage gained by using the other selector/selector combinations.
That's it. Simple, graceful and totally automatic; the way it ought to be. Support for this is almost universal, except for IE, which eats glue and only offers support in IE9+. At the time of writing, estimated global support for these selectors, as used, was roughly 87% which is not too bad.
Targeting Menu Elements with Submenus in a Navigation Bar is a post from CSS-Tricks
]]>