Every menu item in WordPress has a unique ID and they can be styled with background images if you want. You just need to find the id to style the items with CSS using background-images.
Finding the id with Google Chrome browser
If you have the Google Chrome Browser go to your page and right click on the thing you want to know the id of, then select Inspect Element from the menu. After that, a screen will pop up down the bottom of your browser. Select Elements if it isn’t already on that tab.
Finding the id with the Firefox browser
Right click on the object you want to find the id of, then click on Inspect Element from the menu. A screen should open at the bottom of the browser. Make sure it is on the HTML tab if it is not. Just by moving your mouse over lines of code, you can see which lines make the parts of the page.
Just the page source
Of course you can also just look at the page source (HTML code) in almost any browser, if you want to, but I like being able to mouse over things and get the highlighted boxes ;)
After you have the id you just need to add some lines of CSS to edit the menu. Here are some examples:
CSS Example 1:
ID-of-the-thing-here { background-image: url(/images/foo.gif) }
CSS Example 2:
ID-here { background-image: url(http://a4jp.com/images/icons/home2.png); other-bits-of-code-here-if-you-want–delete-this-if-you-do-not-use-it;}
* I usually use GIF, JPG or PNG files.
** GIF or JPG files work the best if you want your images to display on older mobile devices properly. For some reason the transparent part of PNG files becomes black on my 1st Generation iPod and older versions of Internet Explorer.
Glen Rowell
a4jp.com
検索データ | User Search Data:
- menu items wordpress (1)
- wordpress menu image (1)
0 コメント。