How do I add an custom icon to the left listview. For each listview I have an icon that is different from one another. I tried using tag to display icon but I get a bit of a problem. What should I add in the css so that it can be done?
<li><img src="css/test.png">Menu 1</li>
The result is like this :
You need to restructure you html a little bit but here's the official documentation on it.
ListView Icons
And foryour example:
<li><img src="css/test.png" class="ui-li-icon ui-corner-none">Menu 1</li>
*Note: This is supposed to be for a 16x16 icon. Your icon may be a lttiel large. Can't quite tell.
Related
I am currently a college student working on a project for a website, been using the Sublime Text 3. I've currently been trying to tackle a specific code in CSS, the :hover, when i was trying to put it in, the code color doesn't change like the others nor does it follow the command when i test it out in the html website. I was hoping if there are any other Sublime Text users who can help me with this problem? Or if possible, if there is an alternative code for this with Sublime Text. Thank you all.
PS: Here are the codes
Here is the screenshot image of the codes in Sublime CSS
remove the space betweeen .navbar-icon: and hover.
.navbar-item:hover {
background:gold;
cursor:pointer
}
<ul>
<li class="navbar-item">element 1</li>
<li class="navbar-item">element 2</li>
<li class="navbar-item">element 3</li>
</ul>
I'm not sure what do you means but remove the white space between your : and hover. It is a pseudo class :hover like others :focus, :activethat need to be right next to the :
In Sublime Text, pseudo classes are white, by default.
.navbar-item:hover {
background:gold;
}
I've got a un-ordered list. And I've added icons using the Twitter Bootstrap 3.
Using Carme Font from the Google Fonts. For the normal text Carme font works very well.
But in the unordered list which i created, when I add a icon to it using the BS3, I'm getting icon and the font-family for that particular list is getting changed.
FIDDLE for a better understanding.
Notice the font-family both the list items with and without glyphicons.
I don't know whether the problem is..
Any suggestions will be helpful for me to overcome it.
Icon tag needs to go outside <a> tag
<ul>
<li>
<i class="glyphicon glyphicon-user"></i> One 1
</li>
<li>
One 1
</li>
</ul>
I'm working on a site that has hovering popup nav menu that works exactly the way I want. What I want in addition to the menu is to have another popup somewhere else on the page that contains specific information about the element that the user is currently hovering over. If no elements in the nav menu are being hovered over, I want the popups to be hidden.
I have a jsFiddle that has everything I want except the additional popup field.
I've tried everything I can think of except a JavaScript solution (as I'm not fluent in JS), however, I don't mind a JS solution. I can fumble my way through JS and make occasional changes - I just can't create it.
This hovering popup menu works (full HTML and CSS in the jsFiddle):
<ul>
<li>Nav menu here
<ul>
<li>Sub menu items</li>
</ul>
</li>
<li>More nav menu items</li>
</ul>
How do I get an additional popup field with specific-to-the-hovering-element relevant information, when hovering over one of the top-level menu items?
Here is something you can start with.
You can use JavaScript to hide and unhide the information.
Check this JSFiddle : http://jsfiddle.net/apD26/17/
Sample JS :
$(document).ready(function(){
$('.info').hide();
$('.parent').mouseover(function(){
$('.info').show();
$('.info').text($(this).attr('data-desc'));
});
$('.parent').mouseout(function(){
$('.info').hide();
});
});
Instead of $(this).text() which i have used to show the text, you may store your description in a data attribute in each menu item and display that.
EDIT
Updated the JSFiddle and answer
I am working on a website which has subtle dark grey menu items on the top of every page. The menu is constructed using a list and some CSS and HTML. Currently using ID in BODY to highlight menu item which corresponds to the page your looking at.
What I am trying to achieve is that when the page loads, each menu item in the list changes in sequence from dark grey to its .hover colour for a second and then fade back to dark grey. The intention is to show the viewer that there is a menu present, yet then allow the menu to be less intrusive as styled.
HTML (only showing the relevent bits of code)
<head>
<!-- InstanceParam name="id" type="text" value="inno" -->
</head>
<body id="##(id)##">
<div class="big-nav-inline"><ul>
<li>Markets</li>
<li>Technology</li>
<li>Innovation</li>
<li>Ventures</li>
</ul></div>
</body>
CSS Explanation (full code is currently too bloated to paste)
I am using the div class for positioning on the page.
I am using the class of each list item to give a different list item color on .hover
I am using <body id=""> to highlight the current page list item and to change a border colour on the page.
Hope you can help!!!
What do i need to use to get the effect im after? Have any of you done this simply?
Kind Regards
Paul
You can achieve this effect by using CSS3 animations/transitions.
See also this post: start css3 animation after entire page load
I'm developing a Drupal 7 theme, and I'd like to add a big background image to each main menu link but without using a empty tag.
You can see a basic layout in this image.
The red triangle is attached (background) to link1, and the orange one is to link2.
I'd do this in this way:
<ul>
<li></span></li>
<li></span></li>
</ul>
But I wonder if it can be accomplished in another way, without using a empty tag.
Thanks all!
UPDATE: This is what I'm trying to do (but without empty tags!)
I'm not sure if this has something to do with Drupal 7, but what is preventing you from doing:
<li>Link1</span></li>
Do you want the background image to be a clickable part of the link or no? If no, could you do:
<li><span id="bgimage_link1"><a href=#>Link1</a></span></li>
If yes, why can't you just put the background image on the <a>?
<li><a id="bgimage_link1" href=#>Link1</a></li>