Solved

CSS Titles and Alignment

Posted on 2013-12-29
2
248 Views
Last Modified: 2013-12-29
I have menu bars but I don't know how to put titles on them.  Also when you hover over the bar the box expands and text appears.  Two problems, text only appears if you hover over the blue box on the upper left.  And when the text does appear its not appearing to the right of the blue bars.  Also the blue bars are moving!  Any help is appreciated.  Thank you.  www.mediascrubber.com


$(function() {
		$("#sidebox").mouseenter(function(){
        $(this).animate({width: '600px'});
		})
		$("#sidebox").mouseleave(function(){
        $(this).animate({width: '190px'});
		})
		$(".bars img").hover(function(){
  		$(".content ."+$(this).attr("id")).toggle()  
		})
		})

Open in new window


<div id="sidebox">
    <div class="bars">
    <img id="but1">
    </div>
    <div class="bars">
    <img id="but2">
    </div>
    <div class="bars">
    <img id="but3">
    </div>
    <div class="bars">
    <img id="but4">
    </div>
    <div class="content">
    <span class="but1">Button One some more text</span>
    </div>
    <div class="content">
    <span class="but2">Button 2 some more text</span>
    </div>
     <div class="content">
    <span class="but3">Button 3 some more text</span>
    </div>
     <div class="content">
    <span class="but4">Button 4 some more text</span>
    </div>
</div> 

Open in new window

0
Comment
Question by:DS928
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39745268
http://jsfiddle.net/GaryC123/N4685/
New HTML
<div id="sidebox">
    <div id="bar-container">
    <div class="bars">
    <img id="but1">
    </div>
    <div class="bars">
    <img id="but2">
    </div>
    <div class="bars">
    <img id="but3">
    </div>
    <div class="bars">
    <img id="but4">
    </div>
        </div>
    <div class="content">
    <span class="but1">Button One some more text</span>
    </div>
    <div class="content">
    <span class="but2">Button 2 some more text</span>
    </div>
     <div class="content">
    <span class="but3">Button 3 some more text</span>
    </div>
     <div class="content">
    <span class="but4">Button 4 some more text</span>
    </div>
</div>

Open in new window

Additional CSS
#bar-container {
    width:205px;
    display:inline-block;
    float:left
}
.content span {
    display:none
}

Open in new window

New JQuery
$(function() {
		$("#sidebox").mouseenter(function(){
        $(this).animate({width: '600px'});
		})
		$("#sidebox").mouseleave(function(){
        $(this).animate({width: '190px'});
		})
		$(".bars").hover(function(){
  		$(".content ."+$("img",this).attr("id")).toggle()  
		})
		}) 

Open in new window

0
 

Author Closing Comment

by:DS928
ID: 39745278
Thank you!  You are the best!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question