I want to create a menu that looks like:
HOME | FOO | BAR | ABOUT | CONTACT
How might I go about doing this?
Here is what I have tried:
<lift:Menu.builder ul:class="menu" li_item:class="current" />
and
ul.menu li {
display: inline;
list-style-type: none;
text-transform: uppercase;
border-right: 1px solid white;
padding-right: 5px;
}
li.current span {
background: white;
color: black;
padding: 5px 5px 3px 5px;
font-size: 11px;
}
li.current a, a:visited, a:link {
color: white;
padding: 5px 5px 3px 5px;
font-size: 11px;
}
This gets close, but it doesn't look quite right. Also you end up with an extra line at the end. I want the lines to be the same height as the text.
http://lh5.ggpht.com/_5DxlOp9F12k/S2aFQHfupzI/AAAAAAAAJiY/Ds0IpEyu78I/s800/menu.png
There might be a cleaner way to do this. Once you've declared the urls in your sitemap, you can pretty much use them as regular links in your template. You would write them as pure html.
In Boot.scala:
val menus = List(
Menu(Loc("home", List("index"), "Home")),
Menu(Loc("foo", List("foo"), "Foo")),
Menu(Loc("bar", List("bar"), "Bar")),
Menu(Loc("about", List("about"), "About")),
Menu(Loc("contact", List("contact"), "Contact"))
)
LiftRules.setSiteMap(SiteMap(menus: _*))
In your template, e.g. index.html:
<div id="menu">
Home |
Foo |
Bar |
About |
Contact
</div>
Or as said Debilski, you can also call each menu item by their name. It would be more Lift-iesc.
<div id="menu">
<lift:Menu.item name="home"/>
<lift:Menu.item name="foo"/>
<lift:Menu.item name="bar"/>
<lift:Menu.item name="about"/>
<lift:Menu.item name="contact"/>
</div>
You can then add any style you want in an external stylesheet file or inside the page.
To get rid of the last line, you could use the :last-child pseudo-class:
ul.menu li:last-child {
border: none;
}
You might want to try to make the <li> elements have an inline-block display.
ul.menu li {
display: inline-block;
*display: inline; zoom: 1; /* inline-block under IE */
vertical-align: middle;
}
This way, they will behave much more like block elements and might sync with the links. Also, you can try playing with the line-height property instead of adding vertical padding, since the line-height will center the text vertically in a more precise manner.
Having found the other answers unsatisfactory I discovered my own solution...
(Note that I am new to Lift and believe menus are too difficult to code manually)
Solution
Partially use MenuWidget (from lift-widgets) to do the plumbing of enabling superfish menus
Don't use MenuWidget to render the menus as it doesn't do it properly
Use the standard Menu.build to render the menus
Add extra stuff to properly terminate the 'floating' effects of the menu
Add extra stuff to enable centered menus
Full solution is available at:
http://subversion.assembla.com/svn/freshcode_public/learn_scala/lift/src/main/scala/code/snippet/CustomMenu.scala
package code.snippet
import net.liftweb.widgets.menu.MenuWidget
import xml.{Text, NodeSeq}
object CustomMenu {
private def styleElem = {
<style type="text/css">
{Text(
".float-center-item {\n" +
" left: 50%;\n" +
" position: relative;\n" +
"}\n\n" +
".float-center-wrapper {\n" +
" float: right;\n" +
" position: relative;\n" +
" left: -50%;\n" +
"}\n\n" +
".float-clear {\n" +
" clear:both;\n" +
"}\n" +
"/* Margin fix for FireFox */\n" +
"ul.sf-menu {\n" +
" margin-bottom: 0\n" +
"}\n"
)}
</style>
}
def render(in: NodeSeq) = {
// Need to get MenuWidget to provide the plumbing
// We render menu ourselves because MenuWidget doesn't seem to do it properly.
MenuWidget(List("No Group")) ++
<head>
{styleElem}
</head> ++
<div class="float-center-wrapper">
<lift:Menu.builder top:class="sf-menu float-center-item" linkToSelf="true" expandAll="true"/>
</div> ++
// This div terminates the floating effects properly.
<div class="float-clear"></div>
}
}
Usage:
<div class="lift:CustomMenu">nothing</div>
Related
As posted in this question: Hide dropdown menu on click in CSS, I'm looking for a CSS-only way to hide a popup/dropdown menu when one of the links is clicked. An answer was given by Abhijeet Vadera that is almost a great answer - except links in the dropdown menu don't actually do anything/go anywhere. I copied and pasted the code into a test page I've been working on and modified the targets in the links. The dropdown does pop up when hovering over the button, but clicking any of the links does absolutely nothing other than hiding the dropdown.
Does anyone know why this is and (especially) how to make it work? So close....
P.S. Stackoverflow text below my answer on that question tells me that I should ask my own question rather than commenting on another answer or seeking clarification, so that's what I'm doing.
If you don't want to write JavaScript, the easiest way is to use hastags.
Let me explain.
If you press a button, it is an "a" tag whose "href" tag says, for example, #hide
And then the CSS part should look something like this:
I hope I could help.
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.dropbtn a {
text-decoration: none;
}
.dropdown-content {
visibility: visible;
}
#hide:target{
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<a class="dropbtn" href="#">Dropdown</a>
<div class="dropdown-content hide" id="hide">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
The best way to have js-like behaviour is to use checkboxes.
You hide an input checkbox in the same container (this is important) than the hidden menu. If the checkbox is checked, you display the menu, if the checkbox is not checked you hide it.
To trigger the checkbox you can put labels wherever you want on your code as long as it has the "for" attribute that matches with the id of your checkbox.
The trick here is to use the "~" selector which allows you to select a "brother" element. In my code you can see "#showMyMenu:checked ~ .popup" which means "select the popup class which is brother with a checked #showMyMenu".
On my example I putted two labels: one inside and one outside the menu, but you can of course use the same label to trigger the hide/display of your menu !
#showMyMenu {
display: none;
}
label {
display: inline-block;
}
.popup {
display: none;
position: absolute;
box-shadow: 0 0 5px rgba(0,0,0);
padding: 20px;
border-radius: 3px;
}
#showMyMenu:checked ~ .popup {
display: block;
}
<input type="checkbox" id="showMyMenu">
<label for="showMyMenu">Show menu</label>
<div class="popup">
<label for="showMyMenu">Hide menu</label>
<ul>
<li>
An item
</li>
<li>
An item
</li>
<li>
An item
</li>
</ul>
</div>
still very new to this so apologies in advance.
In my footer, the desktop view works fine. As does the landscape mobile view. Heres how it looks on those two views
Landscape views
But in mobile portrait, the social media icons are missing, where have i gone wrong?
Portrait View
HTML code for my footer
<footer class="nav navbar-fixed-bottom navbar-default">
<div class="container-fluid">
<p>© 2017 Example Example</p>
<ul>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-instagram"></span></li>
<li><span class="fa fa-snapchat"></span></li>
<li><span class="fa fa-youtube"></span></li>
</ul>
</div>
</footer>
CSS for footer styling
footer {
background-color: #000000;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
footer p {
float: left;
text-align: center;
margin-top: 15px;
}
footer ul {
list-style: none;
display: flex;
flex: 1;
flex-direction: row;
float: right;
font-size:35px;
margin-top: 2px;
}
.fa-twitter {
margin-right:10px;
color: #fff;
}
.fa-twitter:hover{
color: #00aced;
}
.fa-facebook {
margin-right:10px;
color: #fff;
}
.fa-facebook:hover{
color: #3b5998;
}
.fa-instagram {
margin-right:10px;
color: #fff;
}
.fa-instagram:hover{
background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
.fa-snapchat {
margin-right:10px;
color: #fff;
}
.fa-snapchat:hover{
color: #fffc00;
}
.fa-youtube {
margin-right:5px;
color: #fff;
}
.fa-youtube:hover{
color: #cb2027;
}
Any help would be appreciated!
Most likely the ulwith the social icons simply doesn't fit into the width of the footer next to the text of the p tag and is pushed below into a new line (both are floated). But since the height is fixed (50px), it's hidden. Try to change the height of footer to sonething like 100px for testing, then you'll see if this is what's happening. If yes, you have to make everything a little bit smaller (within a media query) so that it can fit into one line.
Your issue is that your social icons are too big, so the entire <ul> is wrapping to the next line, but since you have a defined height on the <footer> it falls outside of the viewport. Try making your icons smaller, or maybe do something to your <p> to have its text wrap two lines in a narrower width.
You might want to try putting body tags around everything like
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body class="works_on_smartphone">
.
.
.
<footer>
.
.
.
</footer>
</body>
</html>
This might help.
Another method you might want to look at is using flexbox for you unordered list
as described here: [1]: Flexbox with Unordered list
Charles
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>
I have a pure CSS collapsable div which is based on someone else's code who uses the :target psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).
I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.
Here is my jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/
<div class="FAQ">
+
-
<div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
<div class="list">
<p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
</div>
</div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
.FAQ {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
height:auto;
margin:0;
float: left;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
/*style the (+) and (-) */
.hide, .show {
width: 30px;
height: 30px;
border-radius: 30px;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 0 #666;
text-align: center;
text-decoration: none;
box-shadow: 1px 1px 2px #000;
background: #cccbbb;
opacity: .95;
margin-right: 0;
float: left;
margin-bottom: 25px;
}
.hide:hover, .show:hover {
color: #eee;
text-shadow: 0 0 1px #666;
text-decoration: none;
box-shadow: 0 0 4px #222 inset;
opacity: 1;
margin-bottom: 25px;
}
.list p{
height:auto;
margin:0;
}
.question {
float: left;
height: auto;
width: 90%;
line-height: 20px;
padding-left: 20px;
margin-bottom: 25px;
font-style: italic;
}
Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary> and <detail> tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.
I've made an example here:
<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>
Browser support varies. Try in webkit for best results. Other browsers may default to showing all the solutions. You can perhaps fallback to the hide/show method described above.
Using <summary> and <details>
Using <summary> and <details> elements is the simplest but see browser support as current IE is not supporting it. You can polyfill though (most are jQuery-based). Do note that unsupported browser will simply show the expanded version of course, so that may be acceptable in some cases.
/* Optional styling */
summary::-webkit-details-marker {
color: blue;
}
summary:focus {
outline-style: none;
}
<details>
<summary>Summary, caption, or legend for the content</summary>
Content goes here.
</details>
See also how to style the <details> element (HTML5 Doctor) (little bit tricky).
Pure CSS3
The :target selector has a pretty good browser support, and it can be used to make a single collapsible element within the frame.
.details,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .details {
display: block;
}
<div>
<a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
<a id="show1" href="#show1" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
<div>
<a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
<a id="show2" href="#show2" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
#gbtimmon's answer is great, but way, way too complicated. I've simplified his code as much as I could.
#answer,
#show,
#hide:target {
display: none;
}
#hide:target + #show,
#hide:target ~ #answer {
display: inherit;
}
Show
Hide
<div id="answer"><p>Answer</p></div>
You just need to iterate the anchors in the two links.
+
-
See this jsfiddle http://jsfiddle.net/eJX8z/
I also added some margin to the FAQ call to improve the format.
Or a super simple version with barely any css :)
<style>
.faq ul li {
display:block;
float:left;
padding:5px;
}
.faq ul li div {
display:none;
}
.faq ul li div:target {
display:block;
}
</style>
<div class="faq">
<ul>
<li>Question 1
<div id="question1">Answer 1 </div>
</li>
<li>Question 2
<div id="question2">Answer 2 </div>
</li>
<li>Question 3
<div id="question3">Answer 3 </div>
</li>
<li>Question 4
<div id="question4">Answer 4 </div>
</li>
<li>Question 5
<div id="question5">Answer 5 </div>
</li>
<li>Question 6
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>
http://jsfiddle.net/ionko22/4sKD3/
I am trying to decorate the vertical navigation menu using razor in one of my projects , i am trying to add style depending on the functionality with no success , the issue is i have subcategories and categories all in one table , thats why i have to call all the categories , subcategories within a one ul and then decorate them on hover , active , inactive etc. Below is the code, any ideas why the bold statement doesnt works.
<div class="listbox">
<ul class="">
#foreach (var category in Model)
{
<li class="#(category.IsActive ? "active" : "inactive")"
#if (category.NumberOfParentCategories > 0)
{
<text>style="background-image: url('/Content/images/cat-ul-li-list.png');border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px;
text-decoration: none;
padding-top: 4px;
padding-left: 15px;color:#5F9E95;min-height:27px;"</text>
}
**#if (category.NumberOfParentCategories > 0 && category.IsActive == true)
{
<text>style="background-image: url('/Content/images/cat-ul-li-active.png') !Important;"</text>**
}><a href="#Url.RouteUrl("Category", new { categoryId = category.Id, SeName = category.SeName })">#category.Name
</a>
</li><li class="separator"></li>
}
</ul>
</div>
Css:
.block-category-navigation .listbox ul .inactive
{
background-image: url('images/cat-rt-arrow.png');
background-repeat: no-repeat;
background-position: left center;
border-bottom-width: 1px;
border-bottom-color: #5F9E95;
border-bottom-style: solid;
padding-left:15px;
min-height:27px;
padding-top:8px;
}
.block-category-navigation .listbox ul li a:hover { color: #404041; }
.block-category-navigation .listbox ul{ background-image: url('images/cat-ul-active.png') !Important; padding-left:15px;min-height:27px; padding-top: 8px;}
The demonstartion can be seen on test website :Quadratech
Any suggestion or assistance will be appreciated, if this can be done using other methods like css and jquery. I have attached the image of what i am exactly looking for where Haemostasis is the category selected below is the subcategories for haem.. with the subcategory resistance active, and right down the bottom are the other inactive categories.
:
You add two style attributes to your tag.
I would combine them into one.
And cleanup the generation for the LI tag a bit. By first doing the test, and storing the result in some variables:
const string STYLEBASE= "border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px;
text-decoration: none;
padding-top: 4px;
padding-left: 15px;color:#5F9E95;min-height:27px;";
var style = "";
var backgroundimage = "";
if (category.NumberOfParentCategories > 0) {
backgroundimage = "background-image: url('/Content/images/cat-ul-li-list.png');";
style = STYLEBASE;
}
if (category.NumberOfParentCategories > 0 && category.IsActive == true) {
// override the background image
backgroundimage = "background-image: url('/Content/images/cat-ul-li-active.png');
}
<li class="#(category.IsActive ? "active" : "inactive")" style="#Html.Raw(style + " " + backgroundimage)" >